ES6---扩展运算符和rest‘...’(三点运算符),在数组函数set/map等中的应用

Posted 雪莉06

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6---扩展运算符和rest‘...’(三点运算符),在数组函数set/map等中的应用相关的知识,希望对你有一定的参考价值。

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等中的应用的主要内容,如果未能解决你的问题,请参考以下文章

ES6扩展运算符(三点运算符)“...”用法和对象拷贝

(...)ES6三点扩展运算符

ES6扩展运算符(三点运算符)...的用法

ES6 rest参数和扩展运算符

ES6的扩展运算符和rest参数

ES6箭头函数rest参数扩展运算符Symbol的使用