es6 - spreed & rest 【... 擴展運算符】

時間 2019-11-06

標籤 es6 spreed rest ... 擴展運算符欄目 JavaScript 简体版

原文原文鏈接

擴展運算符：…運算符html

好處：簡化書寫長度，提高開發效率。es6

具有兩個功能：

一、展開功能數組

二、收集功能babel

因此…運算符又能夠叫作展開收集運算符。app

他的不一樣做用須要在不一樣場景中使用纔會出現：函數

a、讀 - 展開做用，輸出、打印的狀況。讀完輸出散列的值es5

讀取arg2這個數組，並返回散列的項spa

1 var arg2 = [1,2,3,4,5];
2 
3 console.log(...arg2);// 讀，展開數組成散列的項

b、寫 - 收集做用，寫入、整合的狀況。寫完獲得一個數組prototype

把實參這些散列項寫入到args裏邊並返回一個數組3d

function test(...args){

    console.log(args);//寫，把散列的項寫入到一個數組中

}

test(1,2,3,4,6);

不光這一種用法，他還能夠有選擇性的寫：

以下圖，把擴展運算符寫到最後，前邊有單獨的行參：

* 可是嘗試把…寫在行參中間，就會報錯：

展開做用【讀】的應用：

用法一：把聚合的值展開成散列的值。

var arg2 = [1,2,3,4,5];

console.log(...arg2);// 讀，展開數組成散列的項

// 好比寫…[1,2,3] 至關於寫 1,2,3

觀察了一下babel編譯後的代碼，是讓log調用時使用apply的原理調用：

往apply的第二個參數處傳入一個數組，數組在apply內部就會被一一展開成一個參數列表，log接收到的就是這個展開的參數列表，

執行console.log再次打印就是這個參數列表被一一打印了。這麼看來apply也有展開數組的做用。

用法二：數組合並

 1 // 讀操做 - 數組合並
 2 
 3 let arr1 = [1,2,3,4],
 4 
 5 arr2 = [6,7,8,9],
 6 
 7 newArr = [...arr1,...arr2];
 8 
 9 console.log(newArr);
10 
11 // 至關於下邊的寫法：
12 
13 let concatArr = [].concat(arr1,arr2);
14 
15 console.log(concatArr);

實際上babel編譯後確實是這麼處理的：

這也是他語法糖的說明。

這種方法若是用來作數組克隆的話，也是一種淺克隆。舉例說明：

 1 var arrA = [{
 2     a: 1,
 3     b: 1
 4     },
 5     'b', 
 6     {
 7     a: 2,
 8     b: 2
 9     }
10 ];
11 var arrB = [...arrA];
12 console.log(arrB) arrB[0].a = '淺克隆？';
13 arrB[1] = '淺克隆！';
14 console.log('arrA：', arrA, 'arrB', arrB);

打印結果：

收集做用【寫】的應用：

好比咱們寫一個求和函數：

1 function getSum() {
2     let len = arguments.length,
3         sum = 0;
4     for (let i = 0; i < len; i++) {
5         sum += arguments[i]
6     }
7     return sum
8 }
9 console.log(getSum(1, 2, 3, 4, 6));

這樣寫的原理是利用arguments實質爲一個僞數組，遍歷這個僞數組，把每一項累加求和。

由於之因此叫僞數組，就是由於他們是假數組，不能爲所欲爲的用數組的方法(好比forEach遍歷)，必須經過轉換。

【更多僞數組轉換爲數組的方法見這裏】http://www.javashuo.com/article/p-ksstmqgk-km.html：

若是咱們想用數組的方法，就得把arguments這個僞數組轉化爲數組再進行處理。

1 function getSum() {
2   let arr = Array.prototype.slice.call(arguments); // 轉換僞數組爲真數組。
3   return arr.reduce((pre, cur) => {
4     return pre += cur;
5   }, 0);
6 }
7 console.log(getSum(1, 2, 3, 4, 6));

奇蹟就是，當咱們利用擴展運算符的收集做用後，咱們就能夠直接使用擴展運算符收集後的結果，而這個結果就是一個數組格式：

1 function getSum(...arr) {
2         // let arr = Array.prototype.slice.call(arguments);爲了和上邊作清晰的對比，我直接注視了這一句而不是直接刪掉了。
3     return arr.reduce((pre, cur) = >{
4         return pre += cur
5     },
6     0)
7 }
8 console.log(getSum(1, 2, 3, 4, 6));