esl6中的三個點（...）-rest參數與擴展運算符

rest參數

ES6引入rest參數（ 形式爲「...變量名」） ， 用於獲取函數的多餘參數， 這樣就不須要使用arguments對象了。 rest參數搭配的變量是一個數組， 該變量將多餘的參數放入數組中。

function add(...values) {
        let sum = 0;
        for (var val of values) {
            sum += val;
        }
         return sum;
} 
add(2, 5, 3) // 10

應用：

1.rest參數中的變量表明一個數組， 因此數組特有的方法均可以用於這個變量。 下面是一個利用rest參數改寫數組push方法的例子。

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
    return array
} 
var a = [];
push(a, 1, 2, 3)  //[1,2,3]

擴展運算符

擴展運算符（ spread） 是三個點（ ...） 。 它比如rest參數的逆運算， 將一個數組轉爲用逗號分隔的參數序列。

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

應用：

1.擴展運算符將數組變爲參數序列

function add(x,y){
    return x + y
}
var numbers = [4,28];
add(...numbers) //42

2.替代數組的apply 方法,因爲擴展運算符能夠展開數組， 因此再也不須要apply方法， 將數組轉爲函數的參數了。

// ES5的寫法
function f(x, y, z) {
// ...
} 
var args = [0, 1, 2];
f.apply(null, args);

// ES6的寫法
function f(x, y, z) {
// ...
}
 var args = [0, 1, 2];
f(...args);

// 應用Math.max方法， 簡化求出一個數組最大元素的寫法

// ES5的寫法
Math.max.apply(null, [14, 3, 77])

// ES6的寫法
Math.max(...[14, 3, 77])

// 等同於
Math.max(14, 3, 77);

上面代碼表示， 因爲JavaScript不提供求數組最大元素的函數， 因此只能套用Math.max函數， 將數組轉爲一個參數序列， 而後求最大值。 有了擴展運算
符之後， 就能夠直接用Math.max

3.合併數組

// ES5的寫法
[1, 2].concat(more)

// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合併數組
arr1.concat(arr2, arr3);  // [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合併數組
[...arr1, ...arr2, ...arr3]   // [ 'a', 'b', 'c', 'd', 'e' ]