ES6—擴展運算符和rest運算符（6）

一、擴展運算符簡介

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

說的通俗易懂點，有點像化骨綿掌，把一個大元素給打散成一個個單獨的小元素。

基本用法：拆解字符串與數組

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

二、擴展運算符應用

2.1 某些場景能夠替代apply

在使用Math.max()求數組的最大值時，ES5能夠經過 apply 作到（用一種不友好且繁瑣的方式）

// ES5 apply 寫法
var array = [1,2,3,4,3];
var max1 = Math.max.apply(null,array);
console.log(max1);//4

幸運的是JavaScript的世界在不斷改變，擴展運算符可用於數組的析構，優雅的解決了這個問題。

// ES6 擴展運算符 寫法
var array = [1,2,3,4,3];
var max2 = Math.max(...array);  
console.log(max2);//4

先把 array 打散成 1 2 3 4 3，再在裏面找最大的那一個，就顯而易見了。

2.2 代替數組的push、concat 等方法

實現把 arr2 塞到 arr1 中

// ES5 apply 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1     [0, 1, 2, 3, 4, 5]

擴展運算符又要施展化骨大法了

// ES6 擴展運算符 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
//arr1     [0, 1, 2, 3, 4, 5]

通俗的解釋下， 擴展運算符先把 arr2 打散成 3 4 5 ， 以後再往arr1裏push，就輕鬆多了。

同理可推，concat 合併數組的時候：

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' ]

ES5的合併數組寫法，像是 arr1 把 arr2，arr3 給吸取了。

而ES6的合併數組寫法，則是先把 arr1，arr2， arr3 拆解，以後塞到新的數組中。

2.3 拷貝數組或對象

//拷貝數組
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//拷貝數組
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

不管是像克隆數組仍是對象，先用化骨綿掌之擴展運算符，將其打散，以後再拼裝的到一塊兒就能夠了，多麼簡單易用。

2.4 將僞數組轉化爲數組

//僞數組轉換爲數組
var nodeList = document.querySelectorAll('div');
console.log([...nodeList]);  // [div, div, div ... ]

上面代碼中，querySelectorAll 方法返回的是一個 nodeList 對象。它不是數組，而是一個相似數組的對象。這時，擴展運算符能夠將其轉爲真正的數組，緣由就在於 NodeList 對象實現了 Iterator。

注意：使用擴展運算符將僞數組轉換爲數組有侷限性，這個類數組必須得有默認的迭代器且僞可遍歷的。

三、rest 運算符簡介

剩餘運算符（the rest operator），它的樣子看起來和展開操做符同樣，可是它是用於解構數組和對象。在某種程度上，剩餘元素和展開元素相反，展開元素會「展開」數組變成多個元素，剩餘元素會收集多個元素和「壓縮」成一個單一的元素。

說的通俗點，有點像吸星大法，收集多個元素，壓縮成單一的元素 。

rest參數用於獲取函數的多餘參數，這樣就不須要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

例如實現計算傳入全部參數的和使用arguments參數：

function sumArgu () {
     var result = 0;
     for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result
}
console.log(sumArgu(1,2,3));//6

使用rest參數：

function sumRest (...m) {
    var total = 0; 
    for(var i of m){
        total += i;
    }
    return total;
}
console.log(sumRest(1,2,3));//6

上面代碼利用 rest 參數，能夠向該函數傳入任意數目的參數。傳遞給 sumRest 函數的一組參數值，被整合成了數組 m。

就像是吸星大法，把分散的元素收集到一塊兒。

因此在某些場景中，無需將arguments轉爲真正的數組，能夠直接使用rest參數代替。

四、rest 運算符應用

4.1 rest 參數代替arguments變量

// arguments變量的寫法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest參數的寫法
const sortNumbers = (...numbers) => numbers.sort();

上面的兩種寫法，比較後能夠發現，rest 參數的寫法更天然也更簡潔。

不過，rest參數和arguments對象有必定的區別：

4.2 與解構賦值組合使用

var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]

備註：rest參數可理解爲剩餘的參數，因此必須在最後一位定義，若是定義在中間會報錯。

var array = [1,2,3,4,5,6];
var [a,b,...c,d,e] = array;
//  Uncaught SyntaxError: Rest element must be last element

五、總結

5.1 擴展運算符和rest運算符是逆運算

擴展運算符：數組=>分割序列

rest運算符：分割序列=>數組

5.2 擴展運算符應用場景

因爲其繁瑣的語法，apply 方法使用起來並非很方便。當須要拿一個數組的元素做爲函數調用的參數時，擴展運算符是一個不錯的選擇。

擴展運算符還改善了數組字面量的操做，你能夠更方便的初始化、鏈接、複製數組了。

使用析構賦值你能夠提取數組的一部分。經過與迭代器協議的組合，你能夠以一種更靈活的方式使用該表達式。

5.3 rest運算符應用場景

rest運算符主要是處理不定數量參數，rest參數使得收集參數變得很是簡單。它是類數組對象arguments一個合理的替代品。

rest參數還能夠與解構賦值組合使用。

在實際項目中靈活應用擴展運算符、rest運算符，能寫出更精簡、易讀性高的代碼。