最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

es6三点运算符的使用方法详解

来源:动视网 责编:小OO 时间:2020-11-27 20:04:56
文档

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 .作为拓展运算符使用。● 三点--作为参数。
推荐度:
导读先看一个es6规范下三点运算符的使用实例。let fun=function(a,...list){ console.log(a,list);};fun(';0';,';a';,';b';,';c';);//0 [a,b,c]。以上可以看到我们现在在定义函数对象时可以动态设置参数的个数了:第一个参数a是普通参数(忽略)。大家可以看到第二个参数list前面有三个点 “...”,这种写法在es6规范中有两个用途。1 .作为参数使用。2 .作为拓展运算符使用。● 三点--作为参数。


本文主要为大家带来一篇基于三点运算符的使用方法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

先看一个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三点运算符的使用方法详解

先看一个es6规范下三点运算符的使用实例。let fun=function(a,...list){ console.log(a,list);};fun(';0';,';a';,';b';,';c';);//0 [a,b,c]。以上可以看到我们现在在定义函数对象时可以动态设置参数的个数了:第一个参数a是普通参数(忽略)。大家可以看到第二个参数list前面有三个点 “...”,这种写法在es6规范中有两个用途。1 .作为参数使用。2 .作为拓展运算符使用。● 三点--作为参数。
推荐度:
标签: 讲解 的用法 ES6
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top