ES6 延展操作符

延展操作符(Spread operator)

延展操作符 = ...可以在函數調用/數組構造時,將數組表達式或者string在語法層面展開,還可以在構造對象時,將對象表達式按key-value的方式展開。

 1 函數調用
 2 function(...iterableObj)
 3 
 4 數組構造或者字符串
 5 
 6 [...iterableObj,'4',...'hello',6]
 7 
 8 es2018下構造對象時,進行克隆或者屬性拷貝
 9 
10 let objClone={...obj}

應用場景:

 1 function sum(x,y,x){
 2 
 3 return x+y+z
 4 
 5 }
 6 
 7 const numbers = [1,2,3]
 8 
 9 不使用延展操作符
10 
11 sum.apply(null, numbers)
12 
13 使用延展操作符
14 
15 sum(...numbers)
16 
17 或者在構造數組時
18 
19 如果沒有展開語法,只能組合使用push,splice,concat,slice
20 將已有數組元素變爲新數組的一部分
21 
22 const people=['jan','tom']
23 const person = ['ali',...people,'alliance','ketty']
24 console.log(person)//Ali,jan,tom,alliance,ketty
25 
26 另外,還有一個例子
27 
28 var arr =[1,2,3]
29 var arr2=[...arr]
30 arr2.push(4)
31 console.log(arr2)//1,2,3,4

展開語法與Obj.assign()行爲一致,都是執行淺拷貝,也就是隻遍歷一層,不會遍歷父對象相關的數據

1 var arr1=[0,1,2]
2 var arr2=[3,4,5]
3 var arr3=[...arr1,...arr2] 等同於var arr4 = arr1.concat(arr2)

es2018中增加了對對象的支持

1 var obj1 = {foo:1,foo2:2}
2 var obj2={foo3:12,foo4:30}
3 
4 var clonedObj={...obj1}
5 var mergedObj={...obj1,...obj2}

 



 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章