JavaScript中展开运算符及应用的实例代码
banana peel 人气:0这篇文章主要介绍了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}
加载全部内容