1.含義

擴展運算符(spread)就是我們知道的三個點(...)，它就好像rest參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

console.log(...[1,2,3]);
//1 2 3
console.log(1,...[2,3,4],5)
//1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

擴展運算符主要用于函數(shù)調(diào)用。例如：

function push(array,...items){
    array.push(...items);
}

function add(x,y){
    return x+y;
}
var numbers = [4,40]
add(...numbers) //44


function addNumbers(x,y,z){
    return x+y+z;
}

var numbers = [1,2,3,4];
addNumbers(...numbers); //6

上面代碼中声邦，array.push(...items)和add(...numbers)這兩行，都是函數(shù)的調(diào)用摆舟，他們都使用了擴展運算符亥曹，該運算符將一個數(shù)組邓了，變?yōu)閰?shù)序列。例如上面addNumbers媳瞪，有三個參數(shù)骗炉，而數(shù)組則是4個元素，我們在計算的時候材失，只是取了前三個元素作為參數(shù)放到函數(shù)中進行運算痕鳍，得到 6.

擴展運算符與政策的函數(shù)參數(shù)可以結(jié)合使用，非常靈活龙巨。例如：

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

上面的例子中笼呆，...args是傳入了兩個參數(shù)，而...[3]則是傳入了一個參數(shù)旨别。

擴展運算符后面還可以放置表達式诗赌。

const arr = [
    ...(x > 0 ? ['a']:[]),'b'
];

如果擴展運算符后面是一個空數(shù)組，則不產(chǎn)生任何的效果秸弛。

[...[],1]
//[1]

2.可以替代數(shù)組的apply方法

由于擴展運算符可以展開數(shù)組铭若，所以不再需要apply方法，將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了递览。

//ES5的寫法
function f(x,y,z){
    //...
}

var args = [0,1,2];
f.apply(null,args);

//ES6的寫法
function f(x,y,z){
    //...
}

var args = [0,1,2];
f(...args);

始終記得擴展運算符的含義就是叼屠，將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)序列。
下面是擴展運算符取代apply方法的一個實際例子绞铃，應用Math.max方法镜雨，簡化求出一個數(shù)組最大元素的寫法。

//ES5 的寫法
Math.max.apply(null,[14,3,7])

//ES6的寫法
Math.max(...[14,3,7]);

//等同于
Math.max(14,3,7);

上面代碼中儿捧，由于JavaScript不提供求數(shù)組最大元素的函數(shù)荚坞，所以只能套用Math.max函數(shù)。將數(shù)組轉(zhuǎn)為一個參數(shù)序列菲盾。然后求最大值颓影。有了擴展運算符，就可以直接用Math.max了懒鉴。

另一個例子是通過push函數(shù)诡挂，將一個數(shù)組添加到另一個數(shù)組的尾部。

//ES5的寫法
var arr1 = [0,1,2];
var arr2 = [3,4,5];
Array>prototype.push.apply(arr1,arr2);

//ES6的寫法

var arr1 = [0,1,2];
var arr2 = [3,4,5];
arr1.push(...arr2);

上面代碼的ES5寫法中临谱，push方法的參數(shù)不能是數(shù)組咆畏，所以只好通過apply方法變通使用push方法。有了擴展運算符吴裤，就可以直接將數(shù)組傳入push方法。

下面是另一個例子溺健。

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);

3.擴展運算符的使用

(1) 合并數(shù)組

擴展運算符提供了數(shù)組合并的新寫法麦牺。

//ES5
[1,2].concat(more);
//ES6
[1,2,...more]

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

//ES5的合并數(shù)組
arr1.concat(arr2,arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

//ES6的合并數(shù)組
[...arr1,...arr2,...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

(2) 與解構(gòu)賦值結(jié)合

擴展運算符可以與結(jié)構(gòu)賦值結(jié)合起來钮蛛，用于生成數(shù)組。

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

如果將擴展運算符用于數(shù)組賦值剖膳，只能放在參數(shù)的最后一位魏颓，否則會報錯。

const [...butlast,last] = [1,2,3,4,5,6];
//報錯
const [first ,...middle,last] = [1,2,3,4,5];
//報錯
const [first , middle,...last] = [1,2,3,4,5];

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

(3) 函數(shù)的返回值

JavaScript的函數(shù)只能返回一個值吱晒，如果需要返回多個值甸饱，只能返回數(shù)組或?qū)ο蟆U展運算符提供了解決這個問題的一種變通個方法仑濒。

var dateFieleds = readDataFields(database);
var d = new Date(...dateFields);

上面代碼從數(shù)據(jù)庫取出一行數(shù)據(jù)叹话，通過擴展運算符，直接將其傳入構(gòu)造函數(shù)Date墩瞳。

(4) 字符串

擴展運算符還可以將字符串轉(zhuǎn)為真正的數(shù)組驼壶。

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

上面的寫法，有一種重要的好處喉酌，那就是能夠正確識別32位的Unicode字符热凹。

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

上面代碼的第一種寫法，JavaScript會將32位Unicode字符泪电，識別為2個字符般妙，采用擴展運算符就沒有這個問題。因此相速，正確返回字符串長度的函數(shù)碟渺，可以像下面這樣寫。

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

凡是涉及到操作32位 Unicode 字符的函數(shù)和蚪，都有這個問題止状。因此，最好都用擴展運算符改寫攒霹。

let str = 'x\uD83D\uDE80y';

str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'

[...str].reverse().join('')
// 'y\uD83D\uDE80x'

上面代碼中怯疤，如果不用擴展運算符，字符串的reverse操作就不正確催束。

(5) 實現(xiàn)了Iterator接口的對象

任何Iterator接口的對象(參閱Iterator文字)集峦，都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

上面代碼中,querySelectorAll方法返回的是一個nodeList對象抠刺。它不是數(shù)組塔淤，而是一個類似數(shù)組的對象。這時速妖，擴展運算符可以將其轉(zhuǎn)為真正的數(shù)組高蜂，原因在于NodeList對象實現(xiàn)了Iterator接口。

對于那些沒有部署Iterator接口的類似數(shù)組的對象罕容，擴展運算符就無法將其轉(zhuǎn)為真正的數(shù)組了备恤。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面代碼中稿饰，arrayLike是一個類似數(shù)組的對象，但是沒有部署 Iterator 接口露泊，擴展運算符就會報錯喉镰。這時，可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組惭笑。

(6) Map 和 Set 結(jié)構(gòu)侣姆，Generator函數(shù)

擴展運算符內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的Iterator接口，因此只要具有Iterator接口的對象沉噩，都可以使用擴展運算符捺宗，比如Map結(jié)構(gòu),Set結(jié)構(gòu)。

let map = new Map([
    [1,'one'],
    [2,'two'],
    [3,'three'],
]);

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

Generator函數(shù)運行后屁擅，返回一個遍歷器對象偿凭，因此也可以使用擴展運算符。

var go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

上面代碼中派歌，變量go是一個 Generator 函數(shù)弯囊，執(zhí)行后返回的是一個遍歷器對象，對這個遍歷器對象執(zhí)行擴展運算符胶果，就會將內(nèi)部遍歷得到的值匾嘱，轉(zhuǎn)為一個數(shù)組。

如果對沒有 Iterator 接口的對象早抠，使用擴展運算符霎烙，將會報錯。

var obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

擴展運算符與Set結(jié)構(gòu)的結(jié)合使用

擴展運算符（...）內(nèi)部使用for...of循環(huán)蕊连，所以也可以用于 Set 結(jié)構(gòu)悬垃。
比如：Set結(jié)構(gòu)轉(zhuǎn)為數(shù)組

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

擴展運算符和Set結(jié)構(gòu)相結(jié)合，就可以去除數(shù)組的重復成員甘苍。因為Set結(jié)構(gòu)沒有重復的元素尝蠕。

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

通過擴展運算符，Set結(jié)構(gòu)轉(zhuǎn)為數(shù)組后就可以使用數(shù)組的map方法和filter方法：

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set結(jié)構(gòu)：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set結(jié)構(gòu)：{2, 4}

擴展運算符和Set實現(xiàn)并集载庭，交集看彼，差集：

let a = new Set([1,2,3]);
let b = net Set([4,3,2]);

//并集
let union = new Set([...a,...b]);
// Set {1, 2, 3, 4}
//交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
//差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

擴展運算符與Map結(jié)構(gòu)的結(jié)合使用

使用擴展運算符(...)，是最方便的Map轉(zhuǎn)為數(shù)組的方法

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

Map各種遍歷轉(zhuǎn)為數(shù)組：

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

通過擴展運算符囚聚，Map遍歷轉(zhuǎn)為數(shù)組就可以使用數(shù)組的map方法和filter方法了靖榕。

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 產(chǎn)生 Map 結(jié)構(gòu) {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 產(chǎn)生 Map 結(jié)構(gòu) {2 => '_a', 4 => '_b', 6 => '_c'}

WeakMap和WeakSet 與擴展運算符

WeakMap和WeakSet由于不能遍歷，也就是沒有實現(xiàn)Iterator接口顽铸，所以不能使用擴展運算符茁计。
使用會報錯，例如：

const weakMap = new WeakMap();
const arr = [...weakMap];
VM187089:1 Uncaught TypeError: weakMap[Symbol.iterator] is not a function
    at <anonymous>:1:17
    
    
const weakSet = new WeakSet();
const arrs = [...weakSet];
VM187363:1 Uncaught TypeError: weakSet[Symbol.iterator] is not a function
    at <anonymous>:1:18    

學習文章：ES6之數(shù)組的擴展第一章