es6-扩展运算符

发表于 | 分类于

前言

es6中增加了扩展运算符(spread)，即… 三个点。
比较容易弄混的是数组中的spread和对象中的spread。

数组的spread

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

1
2
3
4
5
console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

参数序列是重点。

对象的spread

对象的扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

1
2
3
let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

重点是拷贝到当前对象之中。这句话的意思是说对象的spread要“依赖于”对象。

举例

1
2
3
4
console.log(...[2, 3, 4])
//2,3,4
console.log(...{a: 3, b: 4})
//报错

为什么后者会报错？
因为对象spread依赖于“对象”，改成这样就好了：

1
2
console.log({...{a: 3, b: 4}};)
//{a: 3, b: 4}

数组spread扩展

转换为数组：
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

1
2
3
4
5
6
7
8
9
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

console.log(...map.keys());// 1 2 3