温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在JavaScript中展开运算符

发布时间:2021-01-15 14:53:41 来源:亿速云 阅读:165 作者:Leah 栏目:开发技术

本篇文章为大家展示了怎么在JavaScript中展开运算符,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

let obj1 = {
 value1: 1,
 value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}

上面的用法实际相当于

obj2 = {value1: 1, value2: 2}

展开运算符的写法与obj2 = obj1直接赋值的写法的区别在于如果直接赋值的话,对于引用类型来说,相当于只是赋值了obj1的内存空间地址,当obj2发生改变的时候,obj1也会随着发生改变。而是用展开运算符写法的话,由于obj1对象中的属性类型都是基本类型,相当于重新创建了一个对象,此时obj2发生改变的时候,并不会影响obj1这个对象。但是仅限于其属性都为基本类型的情况(或者说只进行了一层的深拷贝)。如果该对象中的属性还有引用类型的话,修改属性中引用类型的值,则两个对象的属性值都会被修改。

let obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
let obj2 = {...obj1
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

console.log('obj1:', obj1);
console.log('obj2:', obj2);

展开运算符的应用

1.在函数中使用展开运算符

function test(a, b, c){};

let arr = [1, 2, 3];
test(...arr);

2.数组字面量中使用展开运算符

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 使用push方法
let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]

3.用于解构赋值,解构赋值中展开运算符只能用在最后,否则会报错。

// 解构赋值中展开运算符只能用在最后。
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4.类数组变成数组

let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];

5.对象中使用展开运算符
ES7中的对象展开运算符符可以让我们更快捷地操作对象:

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}

将一个对象插入另外一个对象当中:

let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

合并两个对象:

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

上述内容就是怎么在JavaScript中展开运算符,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI