延展操作符(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}