ES6 展開運算符

2017-11-27

三個點的符號 ..., 英文的正式名稱是 Ellipsis，中文譯是指省略的意思，不過一般在學習這類運算符，下 google 的關鍵字應該多半都會是 three dots 或是 dot-dot-dot

展開運算符號 (Spread Operator)

這種運算符是一種速寫的語法，一開始可能不好理解，不過用上癮後就會熟能生巧了

const boys = ["Nic", "Kurt", "Jimmy"]
const girls = ["Doris", "Flower"]

console.log([...boys]) // ["Nic", "Kurt", "Jimmy"]

//  兩個 Array 組合
console.log([...girls, ...boys]) // ["Doris", "Flower", "Nic", "Kurt", "Jimmy"]

原本需要用 concat 完成的組合 Array 動作只要用展開運算符拼起來就可以了，而且不受 concat 只能放在陣列後方

替代原本 Array 的 apply 方法

由於擴展運算符可以展開 array, 所以在 ES6 之後不需要用 apply 方法，將 array 轉為函數的參數

// ES5
function sum(x, y, z) {
  return x + y + z;
}

var args = [1, 2, 3]
sum.apply(undefined, args); // 6

// ES6
function sum(x, y, z) {
  return x + y + z;
}

const args = [1, 2, 3]
sum(...args) // 6

展開運算符還有一個特別的功能，會把可迭代(iterable)或與陣列相似(Array-like)的Object 轉變為 Array

在 JavaScript 中內建的可迭代(iterable) Object 有

String
Array
TypedArray
Map
Set

const myName = "Nic"
const chars = [...myName] // ["N", "i", "c"]

Nic Lin's Blog

ES6 展開運算符

展開運算符號 (Spread Operator)

參考資源