基于es6三点运算符的使用方法(实例讲解)
先看一个es6规范下三点运算符的使用实例：
letfun=function(a,...list){
console.log(a,list);
};
fun('0','a','b','c');//0[a,b,c]
以上可以看到我们现在在定义函数对象时可以动态设置参数的个数了:第一个参数a是普通参数(忽略)，
大家可以看到第二个参数list前面有三个点“...”，这种写法在es6规范中有两个用途
1.作为参数使用。
2.作为拓展运算符使用。
●三点--作为参数：
letfun1=function(...args){
for(letargofargs){
console.log(arg);
};
console.log(args)
};
fun1('a','b','c');//abc,[a,b,c]
fun1(1,2);//12,[1,2]...args表示了所有的形参，不管传入多少参数，都可以通过args进行遍历得到,args则集合所有的参数组成参数数组
letfun2=function(arr,...args){
console.log(arr);
console.log(args);
};
fun2(1,2,3);//1,[2,3]
fun2(1);//1,[]当...args有其他参数时，rest参数args数组集合除去前面参数之后的参数。
letfun3=function(arr1,..args,arr2){
console.log(args);
}//此时报错！切记，三点作为rest参数的时候，其后不能再有任何参数，只能作为最后一个角色出现！
[x,...y]=[1,2,3];
console.log(y);//[2,3]
[x,...y,z]=[1,2,3];//报错，Restelementmustbelastelementinarray
//作为参数，三点运算符可以函数，解构赋值等方面发挥重要作用。‘人如其名'，rest表示剩下的，
//它把剩下的任意数量的参数推入数组，所以也继承了数组的方法。rest参数只能出现在最后一位，
//不然会报错，当然以扩展运算的身份出现时另当别论。
●三点--作为拓展运算符使用：
letarr=[1,2,3];
console.log(...arr);//1,2,3返回数组中的各项
leta=[2,3];
console.log(1,...a,4);//1,2,3,4扩展运算符可以放在中间
letdivs=document.querySelectorAll('div');
[...divs];//Array[300]，[]可以将divs转为数组解构；
console.log(...divs);//div1,div2....遍历divs各项
letset=newSet([1,2,3,3]);
[...set];//返回数组[1,2,3]，可以将set数据结构转化为数组
letmap=newMap([[1,'a'],[2,'b'],[3,'c']]);
[...map.keys];//返回[1,2,3],属性数组；
[...map.values];//返回[a,b,c],value数组
[...'wbiokr'];//["w","b","i","o","k","r"]遍历字符串，返回各个字符；
letstr='abc';
['aaa',...str,'ccc'];//[aaa,a,b,c,ccc]扩展运算符位置比较任性
//三点的扩展运算符，把数组或者类数组对象展开成一系列逗号隔开的值序列，它好比rest参数时候的逆运算。
以上这篇基于es6三点运算符的使用方法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。