es6三點運算子的使用方法詳解

本文主要為大家帶來一篇基於三點運算子的使用方法(實例講解)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

先看一個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 ps=document.querySelectorAll('p');
[...ps];//Array[300]，[]可以将ps转为数组解构；
console.log(...ps);//p1,p2....遍历ps各项

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的擴充運算子怎麼使用

php中的運算子總結

以上是es6三點運算子的使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！