展开运算符(用三个连续的点…表示)是 ES6 中的新概念,使你能够将字面量对象展开为多个元素。
注意,解构赋值中展开运算符只能用在最后
const [arg, ...arg1, arg2] = ["a", "b", "c", "d"]; //报错
1. 合并数组和对象
在项目中,你肯定遇到过将多个数组进行结合的情况,一般的用法可以使用 Array 的concat()方法:
// concat合并数组
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = a.concat(b);
console.log(c); // [1,2,3,4,5,6]
使用 ES6 的展开运算符可以方便做这个事情:
1). 数组合并
// 展开运算符 数组合并
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];
console.log(c); // [1,2,3,4,5,6]
2).对象合并
const obj1 = {
a: 1,
b: 2
};
const obj2 = {
c: 3,
d: 4
};
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // {a: 1, b: 2, c: 3, d: 4}
2. 解构赋值
1). 数组解构赋值
数组中按顺序匹配,将’a’赋值给arg,'b’赋值给arg1,剩下的元素以数组形式赋值给展开运算符作用的变量。
// 数组解构赋值
const [arg, arg1, ...arg2] = ["a", "b", "c", "d"];
console.log(arg); // a
console.log(arg1); // b
console.log(arg2); // ["c", "d"]
2). 对象解构赋值
// 对象解构赋值
const { a, b, ...data } = { a: 111, b: 222, c: 333, d: 444 };
console.log(a); // 111
console.log(b); // 222
console.log(data); // {c: 333, d: 444}
console.log(data); // {c: 333, d: 444}
3. 数组、对象浅拷贝
浅拷贝(shallow-cloning,不包含prototype)和对象合并,可以使用更简短的展开语法。而不必再使用 Object.assign() 方式。
用扩展运算符对数组或者对象进行拷贝时,是浅拷贝。只能扩展和深拷贝第一层的值,对于第二层极其以后的值,扩展运算符将不能对其进行打散扩展,也不能对其进行深拷贝。
// 浅拷贝 数组
const a = [1, 2, 4];
const b = [...a];
console.log(b); // [1, 2, 4]
a.push(6);
console.log(b); // [1, 2, 4]
// 浅拷贝 对象
const a = { a: 1 };
const b = { ...a };
console.log(b); // { a: 1 }
a.a = 5;
console.log(b.a); // 1
// 浅拷贝 对象
let obj1 = { foo: "abc", x: 42 };
let obj2 = { foo: "def", y: 13 };
let cloneObj = { ...obj1 };
console.log(cloneObj); // 克隆后的对象 {foo: "abc", x: 42}
let mergeObj = { ...obj1, ...obj2 };
console.log(mergeObj); // 合并后的对象 {foo: "def", x: 42, y: 13}
暂时总结这几条,以后再遇到其他的继续写,哈哈哈~