ES6扩展运算符的用法（非常详细，附带实例）

ES6 的扩展运算符是 3 个点（...），作用是将可迭代对象（数组、字符串、Set、Map、DOM 节点等）展开到单独的元素中。

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

【实例】扩展运算符应用—函数调用。

<script>
  function add(x, y) {
    return x + y;
  }
  const numbers = [4, 38];
  console.log(add(...numbers)) // 42
</script>

第 6 行代码 add(...numbers) 是函数的调用，它使用了扩展运算符。该运算符将一个数组变为参数序列，相当于 add(4,38)。

数组是复合的数据类型，如果直接复制，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]

在上面代码中，a2 并不是 a1 的克隆，而是指向同一份数据的另一个指针。修改 a2，会直接导致 a1 的变化。

扩展运算符提供了复制数组的简便写法：
1) 扩展运算符应用—浅复制数组。

<script>
  const a1 = [1, 2];
  const a2 = [...a1];
</script>

第 3 行代码使用了扩展运算符复制数组，a2 是 a1 的浅复制。

2) 扩展运算符应用—arguments 对象转换为数组。

<script>
  function foo() {
    const args = [...arguments];
  }
</script>

第 3 行代码使用扩展运算符，将函数内置参数 arguments 对象转换为真正的数组。扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换为数组。

3) 扩展运算符应用—字符串长度。
扩展运算符还可以将字符串转为真正的数组：

['...hello'] // ['h', 'e', 'l', 'l', 'o']

上面的写法有一个重要的好处，就是能够正确识别 4 字节的 Unicode 字符。

'x\uD83D\uDE80y'.length // 4
['...x\uD83D\uDE80y'].length // 3

上面代码的第一种写法，JavaScript 会将 4 字节的 Unicode 字符识别为 2 个字符，采用扩展运算符就没有这个问题。

因此，正确返回字符串长度的函数，可以像下面这样写：

function length(str) {
  return [...str].length;
}
length('x\uD83D\uDE80y') // 3

凡是涉及操作 4 字节的 Unicode 字符的函数，都有这个问题。因此，最好都用扩展运算符改写。

let str = 'x\uD83D\uDE80y';
str.split('').reverse().join('') // 'y\uDE80\uD83Dx'
['...str'].reverse().join('') // 'y\uD83D\uDE80x'

在上面代码中，如果不用扩展运算符，字符串的 reverse() 操作就不正确。