基于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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
js 与或运算符 || && 妙用
Dec 09 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
react MPA 多页配置详解
Oct 18 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
javascript 页面只自动刷新一次
2009/07/10 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Python 必须了解的5种高级特征
2020/09/10 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
安踏官方商城:anta.cn
2019/12/16 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
上海期货面试题
2014/01/31 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
总经理司机岗位职责
2015/04/10 职场文书
升学宴来宾致辞
2015/07/27 职场文书
九年级历史教学反思
2016/02/19 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL