...展開&收集運算子，也就是說他可以干兩件事情，展開和收集
一：收集，顧名思義把散列東西收集到一個地方，這個地方ES6規定收集在陣列中
例如：下面函式fn將傳遞的引數收集在arg變數中，列印arg是一個陣列，里面包含著傳來的引數，就像吃豆子一樣把值收到自己的嘴里，
function fn(...arg){
console.log(arg); //[1,2,3]
}
fn(1,2,3)
上面的代碼讓我們想起來arguments，也是保存著傳過來的引數，但是我們知道arguments物件是類陣列，當我們想使用陣列的方法時，時使用不了的，需要手動的轉化才可以，而此時的...收集后就是一個陣列，可以使用一系列的陣列方法，
...運算子讓我們感覺有點省略的意思，把引數用...代替，當像下面那樣傳參時引數（3,4,5,6,7），實參（a,b,...arg）.此時的arg就是5,6,7.也就是說...收集只收集你沒定義的形參，就像你省略不寫他們，因此...只能作為最后一位出現，
function test(a,b,...arg){
console.log(a,b,arg); 3,4,[5,6,7]
}
test(3,4,5,6,7);
二： 展開，展開,首先展開的這個東西應該是一個集合，如果是一個值的話，那還展開干嘛，所以ES6規定，展開的這個值必須是可迭代物件（帶Symbol(Symbol.iterator)屬性的物件），怎么看這個是不是可迭代物件，可以在他的原型上看有沒有Symbol(Symbol.iterator)屬性，事實上，所有集合物件--陣列，Set，Map，字串的原型上都默認攜帶這個屬性，因此都是可迭代物件，展開成什么？展開成散列的值，
例如：
var arr = [1,2,3];
console.log(...arr); //1 2 3
可以利用這個特性將兩個陣列合并成一個陣列
var arr1 = [1,2,3];
var arr2 = [7,8,9];
var newArr = [...arr1,...arr2];
...運算子可以獲取（展開）物件里的屬性，但必須在物件里展開{...arg},因為物件不是可迭代物件所以直接...arg會報錯，
var obj1 = {
name: 'zhang',
age: 18,
}
var obj2 = {
...obj1
}
console.log(obj2); {name:'zhang',age:18}
合并物件
var obj1 = {
name:'zhang',
age:18,
}
var obj2 = {
leader:{
'name':'wen',
'age': 20
},
text:'ccc'
}
var newObj = {
...obj1,
leader:{
...obj2.leader
}
}
console.log(newObj);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/171279.html
標籤：JavaScript