ES6中扩展运算符（...）的使用

ECMAScript6中扩展运算符的使用

原文链接

含义

扩展运算符（spread）是三个点（…）。它好比rest的逆运算，将一个数组转为逗号分隔的参数序列。
对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

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

该运算主要用于函数调用（可以和正常参数结合使用）

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

function add(x, y) {
  return x + y;
}
const numbers = [4];
console.log(add(...numbers,5))// 9

如果扩展运算符后面是一个空数组，则不产生任何效果

扩展运算符的应用

（1）复制数组
数组是复合的数据类型，直接复制的话，只是复制了指向底层的数据结构指针，而不是一个全新的数组。

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

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

上面代码中，a2并不是a1定位克隆。而是指向同一份数据的另一个指针，修改a2，a1也会跟着变化。

ES5中克隆数组方法

const a1 = [1, 2];
const a2 = a1.concat();

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

使用扩展运算符克隆

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

（2）合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

不过，这两种方法都是浅拷贝，修改原数组，会同步反映到新数组中。

（3）与结构赋值结合
扩展运算符可以和解构赋值结合起来，用于生成数组

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

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   // []

如果将扩展运算符用于数组赋值，只能放在参数最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

（4）字符串
扩展运算符还可以将字符串转成真正的数组

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