ES6 -- ... 的用途

ES6的"..."有2種作用:

1. ...可取得arguments剩餘的參數

2. ...可合併陣列

先討論第1點:

ES5中可透過arguments物件取得所有傳入函式的參數:

e.g.

function run1(a, b) {

    console.log(arguments);               // arguments能取得所有傳入函式的參數值, 並放在類似陣列上(如想用陣列操作方法, 需要轉換成陣列才可以)

}

run1(10, 20, 30);                                    // [10, 20, 30]  --> 回傳一個arguments物件(非陣列)

但在ES6中不希望再使用arguments物件取得參數, 而是透過...取得剩餘的參數:

e.g.

function run2(a, ...params) {

    console.log(a, params);

}

run2(10, 20, 30);                                   // a = 10 ;  params = [20, 30]  --> 回傳的[20, 30]是個陣列



p.s. ...也可取出全部的參數:

e.g.

function run3(...params) {

    console.log(params);

}

run3(10, 20, 30);                                 // [10, 20, 30] --> 回傳的[10, 20, 30]直接就是一個完整陣列




再者, 討論第2點:

ES5中透過array.concat()合併兩個陣列:

e.g.

var xyz = ["x", "y", "z"];

var abc = ["a", "b", "c"];

console.log(abc.concat(xyz));                   // ["a", "b", "c", "x", "y", "z"]



在ES6中, 可用...去合併陣列, 且合併的位置自由:

e.g.

var xyz = ["x", "y", "z"];

var abc = ["a", "b", "c", ...xyz];

console.log(abc);                                           // ["a", "b", "c", "x", "y", "z"]



p.s. 當我想要在陣列的最前面合併:

var abc = [...xyz, "a", "b", "c"];

console.log(abc);                                           // ["x", "y", "z", "a", "b", "c"]



p.s. 當我想要在陣列的特定位置合併:

var abc = ["a", ...xyz, "b", "c"];

console.log(abc);                                           // ["a", "x", "y", "z", "b", "c"]