ES6拓展運算符的常用場景

之前在學習vuex的輔助函數mapState時候，開始看了一下拓展運算符，當時理解的過於淺顯，並寫了一片淺顯的文章
最近項目空閒期，想認真總結一下這個語法糖/三個點/拓展運算符

拓展運算符的含義

將一個數組轉爲用逗號分隔的參數序列
該運算符主要用於函數調用。

從最淺顯的外表來看，就是脫掉數組的外套（數組的[] 就很像外套吧。。。），只留下裏面的內容，用法就是把裏面的內容混淆到其他對象中去；
比如：

var a =[{d:1}]//去掉外套就是 {d:1}
var b = {...a,e:2}
//b  ={{d:1},{e:2}}

好了，下面開始正式的去上實例：

• 僞數組/類數組轉爲真正的數組

var divs = document.getElementsByClassName('.div');
//大家都知道divs是一個僞數組
var divArray = [...divs]

注意： 對於那些沒有部署 Iterator 接口的類似數組的對象，擴展運算符就無法將其轉爲真正的數組。

比如：

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
//這樣的就不行，這時，可以改爲使用Array.from方法將arrayLike轉爲真正的數組。

• 克隆數組

var a=[1,2]
var b =[...a]
//b    (2) [1, 2]

• 合併數組，或者將a數組混入到b數組中去

var a=[1,2]
var b = [8,...a,9]
//b   (4) [8, 1, 2, 9]

• 字符串轉數組

var s = 'nice'
var a = [...s]
//a   (4) ["n", "i", "c", "e"]

• 與解構賦值結合，生成數組

const [a,...b]=[1,2,3]
//a=1,b=[2,3]

或者在函數裏面某個參數沒有傳值的情況下，就賦值空數組

function a ([m,...n]){console.log(m,n)}
a([1])
//打印出  1 []

• 具有 Iterator 接口的對象:Map 和 Set 結構，Generator 函數

擴展運算符內部調用的是數據結構的 Iterator 接口，因此只要具有 Iterator 接口的對象，都可以使用擴展運算符，比如 Map 結構。