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方法的例子。app

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.擴展運算符將數組變爲參數序列rest

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

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

// 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.合併數組ip

// 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' ]
相關文章
相關標籤/搜索