JavaScript中展开运算符及应用的实例代码
(编辑：jimmy 日期: 2024/11/24 浏览：3 次 )
展开运算符（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}
下一篇：js中延迟加载和预加载的具体使用