先看一個es6規範下三點運算子的使用實例:
let fun=function(a,...list){ console.log(a,list);};fun('0','a','b','c');//0 [a,b,c]以上可以看到我們現在在定義函數物件時可以動態設置參數的個數了:第一個參數a是普通參數(忽略),
大家可以看到第二個參數list前面有三個點 “...”, 這種寫法在es6規範中有兩個用途
1 . 作為參數使用。
2 . 作為拓展運算子使用。
● 三點--作為參數:
let fun1=function(...args){ for(let arg of args){ console.log(arg); }; console.log(args)};fun1('a','b','c');//a b c,[a,b,c]fun1(1,2);//1 2,[1,2] ...args表示了所有的形參, 不管傳入多少參數, 都可以通過args進行遍歷得到,args則集合所有的參數組成參數陣列let fun2=function(arr,...args){ console.log(arr); console.log(args);};fun2(1,2,3);//1, [2,3]fun2(1);//1, []當...args有其他參數時, rest參數args陣列集合除去前面參數之後的參數。 let fun3=function(arr1,..args,arr2){ console.log(args);}//此時報錯!切記, 三點作為rest參數的時候, 其後不能再有任何參數,
● 三點--作為拓展運算子使用:
let arr=[1,2,3];console.log(...arr);//1, 2, 3返回陣列中的各項let a=[2,3];console.log(1,...a,4);//1,2,3,4擴展運算子可以放在中間let divs=document.querySelectorAll('div');[...divs];//Array[300], []可以將divs轉為陣列解構;console.log(...divs);//div1,div2....遍歷divs各項let set=new Set([1,2,3,3]);[...set];//返回陣列[1,2,3], 可以將set資料結構轉化為陣列let map=new Map([[1,'a'],[2,'b'],[3,'c']]);[...map.keys];//返回[1,2,3],屬性陣列;[...map.values];//返回[a,b,c],value陣列[...'wbiokr'];//["w", "b", "i", "o", "k", "r"]遍歷字串, 返回各個字元;let str='abc';['aaa',...str,'ccc'];//[aaa, a, b, c, ccc]擴展運算子位置比較任性//三點的擴展運算子, 把陣列或者類陣列物件展開成一系列逗號隔開的值序列, 它好比rest參數時候的逆運算。
對於web前端的學習有不懂的,