es6扩展运算符

一，含义

扩展运算符（ spread ）是三个点（...）。将一个数组转为用逗号分隔的参数序列。

二，例子

（1）基本用法

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

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。

扩展运算符与正常的函数参数可以结合使用，非常灵活。

function f(v, w, x, y, z) { }  
var args = [0, 1];  
f(-1, ...args, 2, ...[3]);

(2)合并数组

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

(3)与解构赋值结合

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

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

（4）代替applay方法

// ES5 的写法  
Math.max.apply(null, [14, 3, 77])  
// ES6 的写法  
Math.max(...[14, 3, 77])  
//  等同于  
Math.max(14, 3, 77);  

上面代码表示，由于扩展运算符可以展开数组， JavaScript 不提供求数组最大元素的函数，所以只能套用Math.max函数，将数组转为一个参数序列，然后求最大值。有了扩展运算符以后，就可以直接用Math.max了。

(5)字符串

扩展运算符还可以将字符串转为真正的数组

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

(6)与set()数据结构连用，达到数组去重的目的

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 本身是一个构造函数，用来生成 Set 数据结构。

// 去除数组的重复成员
let array=[1,2,2,3]
[...new Set(array)]//[1,2,3]
//数组去重的另一种方法
function dedupe(array) {
  return Array.from(new Set(array));
}
dedupe(array) // [1, 2, 3]