展开运算符在项目中的轻度运用

展开运算符就是3个点(…),相信大家对些并不陌生，因为我们经常在项目中能看到它的影子，他可以简化我们的代码，看起来更加优雅。现在看看下面几个demo示例，都是我们工作中可能要用到的。

数组扩展运算符

1.合并数组

    let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];//写法1arr1.push(...arr2);console.log(arr1);//[0, 1, 2, 3, 4, 5]//写法2arr1 = [...arr2,...arr1]console.log(arr1);//[3,4,5,0,1,2,3,4,5]

2.与解构赋值结合

    const [first, ...rest] = [1, 2, 3, 4, 5];console.log(rest) //[2, 3, 4, 5]console.log(first) // 1

3.函数传参中的最后一个形参

const fn = (arg1,arg2,arg3) => {//do something
}let arr = [1,2,3]
fn(...arr);

当作函数调用的时候，就是把每个参数扩展开来当作函数的一个参数来传进去，注意，只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错。

4.复制数组

以前我们复制一个数组的时候，我们经常这样写

const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
console.log(a1) // [1, 2]

上面代码中，a1会返回原数组的克隆，再修改a2就不会对a1产生影响；

有了扩展运算符，我们把上面的代码就可以简化成以下：

const a1 = [1,2];
//你可以这么写：
const a2 = [...a1]
//也可以这么写：
const [...a2] = a1

对象扩展运算符

1.合并对象

let obj1 = {name:'张三'
}
let obj2 = {address:'文西3路89号'
}
let obj3 = {age:'24'
}
let obj4 = {...obj1,...obj2,...obj3};
console.log(obj4);//{name: "张三", address: "文西3路89号", age: "24"}

2.复制对象

let obj4 = {name: "李四", address: "西苑89号", age: "26"};
let obj5 = {...obj4}; //或者这么写：{...obj5} = obj4;
console.log(obj5)//{name: "李四", address: "西苑89号", age: "26"};

3.结构赋值

let { A, B, ...C } = { A: 1, B: 2, a: 3, b: 4 };
A // 1
B // 2
C // { a: 3, b: 4 }

上面代码中，变量 C 是解构赋值所在的对象。它获取等号右边的所有尚未读取的键（a和b），将它们连同值一起拷贝过来。

由于解构赋值要求等号右边是一个对象，所有如果等号右边是 undefined 或 null，就会报错，因为它们无法转为对象。

let { A, B, ...C } = null; // 运行时错误
let { A, B, ...C } = undefined; // 运行时错误

解构赋值必须是最后一个参数，否则报错。

let { ...A, B, C } = obj; // 句法错误
let { A, ...B, ...C } = obj; // 句法错误
//Uncaught SyntaxError: Rest element must be last element

上面代码中，解构赋值不是最后一个参数，所以会报错。
注意，解构赋值的拷贝是浅拷贝，即如果一个键的值是复合型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。看下面示例：

let obj = { a: { b: 9 },c:8 };
let d = {...obj};//也可以这么写 let {...d} = obj;
obj.a.b = 2;
console.log(d.a.b) // 2

上面代码中，d是解构赋值所在的对象，拷贝了对象 obj 的 a 属性。a 属性引用了一个对象，修改这个对象的值，会影响到解构赋值对它的引用。

展开运算符，需要我们在平时项目中多练练，能用…做到的就尽量用…, 这样会越来越熟练，本文只做一些简单的示范，重点是自己在项目中熟练运用。