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' ]
    原文作者:lcf1122
    原文地址: https://segmentfault.com/a/1190000014875454
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞