ES6---擴展運算符和rest‘...’(三點運算符),在數組、函數、set/map等中的應用
阿新 • • 發佈:2018-03-24
數組集合 發揮 通過 一起 數量 ... XML 參數 運算符和
ES6新增的三點運算符,是由三個點表示,在數組中扮演著重要的角色,可以對數組進行合並與分解、可以對set等數據結構進行轉換、可以對函數參數進行簡化表示,接下來,我們一起揭開其神秘面紗…
●三點—rest參數: |
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參數的時候,其後不能再有任何參數,只能作為最後一個角色出現!
//////////////////////////
[x,...y]=[1,2,3];
console.log(y);//[2,3]
[x,...y,z]=[1,2,3];//報錯,Rest element must be last element in array
作為rest參數,三點運算符可以函數,解構賦值等方面發揮重要作用。‘人如其名’,rest表示剩下的,它把剩下的任意數量的參數推入數組,所以也繼承了數組的方法。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參數時候的逆運算。 |
ES6---擴展運算符和rest‘...’(三點運算符),在數組、函數、set/map等中的應用