JavaScript ES6 Spread/Rest Operator 運算子

ES6 引入了新的運算子 (operator) ... (三個點號) 來表示展開或其餘運算子。

Spread Operator 展開運算子

Spread Operator 可以用在執行函數時的參數列上，它可以將一個陣列 (array) 展開，轉為多個逗點隔開的獨立參數：

function foo(x, y, z) {
    console.log(x, y, z);
}

var arr = [1, 2, 3];

// 輸出 1 2 3
// 等同於執行 foo(1, 2, 3)
foo(...arr);

也可以放在多個參數中間使用：

function foo(a, b, c, d, e) {
    console.log(a, b, c, d, e);
}

var arr = [3, 4];

// 輸出 1 2 3 4 5
// 等同於執行 foo(1, 2, 3, 4, 5)
foo(1, 2, ...arr, 5);

Spread Operator 也可以用在 array literal，用來展開陣列元素：

var parts = ['shoulders', 'knees']; 

// 將 parts 展開在 lyrics 的元素中
var lyrics = ['head', ...parts, 'and', 'toes'];

// lyrics 的值會變成 ["head", "shoulders", "knees", "and", "toes"]

Spread Operator 也可以用來結合 (concat) 多個陣列：

var ary1 = [4, 5, 6];
var ary2 = [1, 2, 3];

// ary1 會變成 [1, 2, 3, 4, 5, 6]
ary1 = [...ary2, ...ary1];

Rest Operator 其餘運算子

在 ES6 之前，如果你想要一個函數可以接受不固定數量的參數，你可能會這樣寫：

function fn(a, b) {
  var args = Array.prototype.slice.call(arguments, fn.length);

  // ...
}

ES6 新的 Rest Operator 讓你可以更直觀的宣告不定長度參數。

上面的函數，用 Rest Operator 可以改寫為：

function fn(a, b, ...args) {
    // ...
}

...args 只能放在最後一個參數，用來獲取其餘的參數，args 的值是一個陣列 (array)，用來存放獲取的參數。

使用例子：

function fun1(...myArgs) {
  console.log(myArgs);
}

// 顯示 []
fun1();

// 顯示 [1]
fun1(1);

// 顯示 [5, 6, 7]
fun1(5, 6, 7);