es6 擴展運算符 ...

es6 新增了不少特性，其中包括擴展運算符 ...，擴展運算符使用場景比較多，並且使用在不一樣的場景所表達的意思是不同的。總結以下

• rest 參數
• 數組的擴展運算符
• 對象的擴展運算符

rest 參數

咱們都知道arguments對象不是一個真正的數組，因此es6 推出了一種新的寫法 以下：

 

1 function say(...name) {
2     name.forEach(item => {
3         console.log(item)
4     }) //joel,vue,js
5     console.log(name instanceof Array) //true
6 }
7 say('joel','vue','js')

 

這種在function形參中使用三個點 ...  表示用於獲取函數的多餘參數（把多餘的參數序列轉爲一個數組），這樣就不須要使用arguments對象了。rest 參數的變量是一個數組，該變量將一組參數放入數組中。

rest 參數只能是最後一個形參，並且函數的length屬性，不包括 rest 參數。

數組的擴展運算符

在數組中使用 ... 擴展運算符，就好像是rest 參數的反運算  以下代碼

1 let array = [123,211,332,412,125,236,237,787]
2 console.log(Math.max(...array))

把一個數組轉爲用逗號分隔的參數序列。

對象的擴展運算符

對象的擴展運算符分爲兩種，一種是在解構賦值中，以下代碼

1 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
2 console.log(z) // {a:3,b:4}

至關於把目標對象自身的全部可遍歷、但還沒有被讀取的屬性，分配到指定的對象上面。全部的鍵和它們的值，都會拷貝到新對象上面。

因爲解構賦值要求等號右邊是一個對象，因此若是等號右邊是undefined或null，就會報錯，由於它們沒法轉爲對象。

解構賦值必須是最後一個參數，不然會報錯。

1 let { x, ...z, y } = { x: 1, y: 2, a: 3, b: 4 }; // 語法錯誤

另一種是非解構賦值中，以下代碼

 1 let obj = {
 2     name: 'joel', 
 3     age: '20', 
 4     tempObj: {
 5         name: 'tempJoel'
 6         }
 7     }
 8 let temp = {...obj}
 9 temp.tempObj = 'joel29'
10 console.log(temp) // {name: "joel", age: "20", tempObj: "joel29"}
11 console.log(obj.tempObj) // {name: "tempJoel"}

取出參數對象的全部可遍歷屬性，拷貝到當前對象之中。 如上代碼，這種拷貝不是淺拷貝，只有在解構賦值的拷貝是淺拷貝， 以下代碼

 1 let obj = {
 2     name: 'joel', 
 3     age: '20', 
 4     tempObj: {
 5         name: 'tempJoel'
 6         }
 7     }
 8 let temp = {...obj}
 9 temp.tempObj.name='tempJoel修改'
10 console.log(temp)
11 console.log(obj)

咱們是修改temp 對象的tempObj，可是obj對象中的tempObj中的name也同步修改了。

在對象的擴展運算符中都是把目標的對象的屬性拷貝到對象中，若是是解構是存在淺拷貝 

 擴展運算符的本質

在es6 中統一了遍歷的接口 Iterator，Iterator 接口的目的，就是爲全部數據結構，提供了一種統一的訪問機制，即for...of循環。

擴展運算符（...）內部實際上是調用了 Iterator 接口。

總結

rest 參數

數組的擴展運算符

對象的擴展運算符