js中的展开运算符怎样应用？
发布时间：2022-03-24 13:43:48 所属栏目：语言 来源：互联网
导读：文本主要给大家分享的是关于JS展开运算符的内容，一些朋友可能对于JS展开运算符比较陌生，下文有对展开运算符介绍以及实例，感兴趣的朋友可以参考学习。 展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多
|
文本主要给大家分享的是关于JS展开运算符的内容，一些朋友可能对于JS展开运算符比较陌生，下文有对展开运算符介绍以及实例，感兴趣的朋友可以参考学习。 展开运算符（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} （编辑：张家口站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
