三點運算符使用方法

先看一個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參數的時候，其后不能再有任何參數，只能作為最后一個角色出現！

[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參數只能出現在最后一位，
//不然會報錯，當然以擴展運算的身份出現時另當別論。

 

● 三點--作為拓展運算符使用：

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參數時候的逆運算。

 

( 部分事例代碼轉自:http://blog.csdn.net/Wbiokr/article/details/67647753 )