数组的扩展运算符
(1) 复制数组(深拷贝)
// 数组的扩展运算符
let a1 = [1, 2]
// ES6写法
let a2 = [...a1]
// 验证：改变变量a2的值并不会改变a1
a2[0] = 2
console.log('a1', a1, 'a2', a2) // => a1 = [1, 2], a2 = [2, 2]
// ES5写法 则用concat合并方法复制 let a2 = a1.concat()
注意点：...扩展运算符号只能是针对一维度的对象或数组进行深拷贝。不能对多维进行深拷贝
const obj = {a: 1, b: 2}
const {...x} = obj
obj.a = 2
console.log(x) // {a: 1, b: 2}
const obj2 = { a: { b: 1 } };
const {...x2} = obj2
obj2.a.b = 2;
console.log(x2) // {a: {b : 2}}
const obj3 = {a: 1, b: function () {let a = 2}}
const {...x3} = obj3
obj3.b = function () {let a = 4}
console.log(x3.b) // ƒ () {let a = 2}
const obj4 = {a: {b: function () {let a = 2}}}
const {...x4} = obj4
obj4.a.b = function () {let a = 4}
console.log(x4.a.b) // ƒ () {let a = 4}
(2) 合并数组(浅拷贝)
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true
// 浅拷贝
a1[0].foo = 4
console.log(a4) // [{ foo: 4 }, {bar: 2}];
上面代码中，a3和a4是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了原数组的成员，会同步反映到新数组。
(3) 与解构赋值结合，用于生成数组
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
注意：扩展运算符用于数组赋值，只能"放在参数的最后一位"，否则会报错
(4) 将字符串转为真正的数组
let a = 'abc'
let b = [...abc]
console.log('b' ,b) // => ['a', 'b', 'c']
注意：涉及到"操作四个字节的 Unicode 字符"的函数，想要正确返回字符串长度的函数。最好都用扩展运算符改写。
(5) 类数组转为真正的数组
任何 Iterator 接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组。
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
对于那些没有部署 Iterator 接口的类似数组的对象, 扩展运算符就会报错。这时，可以改为使用Array.from方法将arrayLike转为真正的数组。
类似数组的对象转为真正的数组
错误做法：
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
正确做法：
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
(6) Map 和 Set 结构，Generator 函数
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
我的实践
1.与解构赋值结合，用于生成对象/数组
解构赋值是一个十分有趣的实践，我在自己的React项目中大量的使用了这种技巧。你可以使用扩展运算符配合其他运算符一起，从变量中提取有用的信息，就像这样。 注意：这只是浅拷贝。
// 对象
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
// api用法 res.data.data.为api请求回来的数据，从中提取name,mobile等...
let {name, mobile, weixin, qq, email} = res.data.data
// 数组
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
2.在函数中的调用扩展运算符,该运算符将一个数组，变为参数序列。
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
- 扩展某个函数的参数
解构赋值的一个用处，是扩展某个函数的参数，引入其他操作。
function baseFunction({ a, b }) {
// ...
}
function wrapperFunction({ x, y, ...restConfig }) {
// 使用 x 和 y 参数进行操作
// 其余参数传给原始函数
return baseFunction(restConfig);
}
上面代码中，原始函数baseFunction接受a和b作为参数，函数wrapperFunction在baseFunction的基础上进行了扩展，能够接受多余的参数，并且保留原始函数的行为。
参考链接:
