基于es6三点运算符的使用方法(实例讲解)


Posted in Javascript onOctober 12, 2017

先看一个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参数时候的逆运算。

以上这篇基于es6三点运算符的使用方法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
一文了解Vue中的nextTick
May 06 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 #Javascript
原生JS封装animate运动框架的实例
Oct 12 #Javascript
javascript中神奇的 Date对象小结
Oct 12 #Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 #Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 #Javascript
js实现单张图片平移切换效果
Oct 11 #Javascript
jQuery自动或手动图片切换效果
Oct 11 #jQuery
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
15种PHP Encoder的比较
2007/03/06 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
详解Python IO口多路复用
2020/06/17 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
大学生求职推荐信
2013/11/27 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
2014年幼师工作总结
2014/11/22 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript