这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
先导
-
扩展运算符有很多优点，其中最主要是简化数组的相关操作，使代码的书写逻辑更加简单且方便。
-
书写：扩展运算符（spread）是三个点（
...）。 -
作用：它好比 rest 参数的逆运算，将一个数组转为列表形式的数值型参数。
-
补充：Rest 参数 使用三个点
...并在后面跟着包含剩余参数的数组名称，来将它们包含在函数定义中。这些点的字面意思是“将剩余参数收集到一个数组中”。但是要注意，rest参数后面不能再有别的参数，否则就会报错。
使用
1. 展开数组为列表参数
let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5
（spread 语法把数组转换为参数列表）
-
这样做的优点在于，有时候我们不确定是否有参数且若参数很多书写起来比较麻烦，因此有了它就不必在意参数，只需传递定义时确定的参数即可。
-
还可以将 spread 语法与常规值结合使用：
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
2. 替代函数的 apply() 方法
因为它可展开数组的特性，不再需要apply()方法将数组转为函数的参数了。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
//等同Array.prototype.push.apply(arr1, arr2);
应用
1. 复制数组
- 由于数组是引用类型，直接通过
=复制会导致复制了指针，从而修改复制的变量会影响原始变量
//ES5
const a2 = a1.concat();
//ES6
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
解决方案： 让 a2真正变成a1的克隆，从而避免影响a1的值
2. 合并数组
const arr1 = ['a', 'b'];
const arr2 = ['c','d'];
// ES5 的合并数组
arr1.concat(arr2);
// [ 'a', 'b', 'c', 'd' ]
// ES6 的合并数组
[...arr1, ...arr2]
3. 字符串转换成真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
4. Iterator 接口的对象转换为真正的数组
let List = document.querySelectorAll('div');
let array = [...List];
let map = new Map([
[1, 'one'],
[2, 'two']
]);
let arr = [...map.keys()]; // [1, 2]
注意 : 没有 Iterator 接口的对象，使用扩展运算符，将会报错
