JavaScript 扩展运算符（...）

数组的用法

数组拷贝

如果数组中的元素都是基本类型的值，修改其中一个数组不会对另一个数组产生影响

const arr = [1, 2, 3, 4];
const arr2 = [...arr];
arr2.push(5)
console.log(arr);  // [1, 2, 3, 4]
console.log(arr2);  // [1, 2, 3, 4, 5]

连接多个数组

const arr = [1, 2, 3];
const arr2 = [4, 5, 6];

// es5 合并数组
const arr3 = arr.concat(arr2);
console.log(arr3);  // [1, 2, 3, 4, 5, 6]

// es6 合并数组
const arr3 = [...arr, ...arr2];
console.log(arr3);  // [1, 2, 3, 4, 5, 6]

如果数组中的元素是引用类型。因为它们的成员都是对原数组成员的引用，如果修改了引用指向的值，会同步反应到新数组。

const arr1 = [{foo: 1}];
const arr2 = [{bar: 2}];
const arr3 = arr1.concat(arr2);
const arr4 = [...arr1, ...arr2];
arr3[0].foo = 2;
console.log(arr4);  // [{foo: 2}, {bar: 2}]

对象的用法

对象的扩展运算符将已有对象的所有可枚举（enumerable）属性拷贝到新构造的对象中

//浅拷贝和对象合并
const obj1 = {foo: 1, x: 2};
const obj2 = {foo: 2, y: 3};
const cloneObj = {...obj1};
const mergeObj = {...obj1, ...obj2};
console.log(cloneObj);  // {foo: 1, x: 2}
console.log(mergeObj);  // {foo: 2, x: 2, y: 3}

// 对象的扩展运算符相当于使用Object.assign()方法
const assignObj = Object.assign({}, obj1);
console.log(assignObj);  // {foo: 1, x: 2}

字符串的用法

const obj1 = {...'hello'};
console.log(obj1);  // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

const arr1 = [...'hello'];
console.log(arr1);  // ["h", "e", "l", "l", "o"]