ES6中扩展运算符三个点（...）的使用

扩展运算符(…)一般用于数组数据获取和数据解构合并等。

展开项

let a = [1,2,,3,4];
let b = [5,6,7];
console.log(a);      // [1, 2, empty, 3, 4]
console.log(...a);   // 1 2 undefined 3 4
console.log([...a, ...b]);   // [1, 2, undefined, 3, 4, 5, 6, 7]

数组的扩展运算符

1）复制数组：
不能用如下方式对数组赋值：

const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2[0] = 2;
console.log(arr1); // [2, 2, 3]
console.log(arr2); // [2, 2, 3]

可以发现arr1数组的第一个元素值发生改变，这里涉及到数组的深拷贝和浅拷贝的问题，可进行详细了解。
用扩展运算符：

const arr1 = [1, 2];
const arr2 = [...arr1];

注意：
如果将扩展运算符用于数组赋值，对对象直接使用的话会报错。而且只能放在参数的最后一位，否则会报错。

const [...rest, last] = [1, 2, 3, 4, 5, 6, 7, 8, 9];  // 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 报错

对象的扩展运算符：

let test1 = { name: '张三', age: 20 };
注意：对象使用的话必须在外层添加 {}  ，否则会报错
let test2 = { ...test1 };  
console.log(test2);   // { name: '张三', age: 20 }

上面表达式等价于：

let test1 = { name: '张三', age: 20 };
let test2 = Object.assign({}, test1); 
console.log(test2);  // { name: '张三', age: 20 }

Object.assign(target, …sources)方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
注意：此方法的第一个参数为目标对象，后面的参数都是源对象，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

let test1= {name: '张三', age: 20};
let test2= {...bar, ...{name: '张三', age: 18}};  
console.log(test2);   // {name: '张三', age: 18}