擴展運算符「spread」的交談

原文連接 - 航洋無聲 - Github

擴展運算符，看起來和 rest 參數 外觀類似，也是三個點「...」，
不過和 rest 參數功能但是不同呢

擴展運算符號，分二種狀況

1. iterable「通常狀況爲數組」
2. enumerable「通常狀況爲對象」

在標準的 ES2015 中，只有針對 iterable 數據實現了擴展運算符
它把 iterable 數據的數據序列轉換爲用 逗號分割的參數序列

好比：

let array = [5, 12]
let arrayCopy = [11, ...array]
// 此行代碼相似於：let arrayCopy = [11, 5, 12]
// arrayCopy ==> [11, 5, 12]

console.log(...[5, 12])
console.log(5, 12)
// 上面 2 行代碼意義同樣
// 輸出結果都是是：5 12

通過上面的 2 個列子，
應該能更好的理解「擴展運算符的結果是 逗號分隔的參數序列」的含義

不過有個須要注意的點：
非 iterable 數據執行擴展運算符，會報錯

在 ES7 的 某個提案 中，
講擴展運算符引入 enumerable 數據

好比：

let obj = {name: 'hangyangws'}
let objCopy = {...obj}
console.log(objCopy) // 輸出：{name: 'hangyangws'}

其實 enumerable 數據的擴展運算符底層實現是利用了 Object.assign

Object.assign(target, ...sources) 咱們比較熟悉，有 2 個特色：

1. sources 參數若是是「原始類型」會被包裝爲「對象」
2. sources 參數若是是 null 和 undefined 會被忽略

好比：

Object.assign({}, null) // 結果爲：{}
Object.assign({}, undefined) // 結果爲：{}

Object.assign({}, 0) // 結果爲：{}
Object.assign({}, 'FJ') // 結果爲：{0: "F", 1: "J"}
// 因此有個點能夠注意一下：
// 只有字符串的包裝對象纔可能有自身可枚舉屬性
// 對於「數字」，結果和 null、undefined 相似

既然擴展運算符有 2 種狀況，那麼 JS 解釋器怎麼知道使用哪種？
因此擴展運算符會根據代碼的具體的 執行上下文 判斷

好比：

let test = [...null]
// 報錯：null is not iterable

let test = {...null}
// test ===> {}