基于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 相关文章推荐
jquery 插件学习(四)
Aug 06 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
简单分析javascript中的函数
Sep 10 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
vue params、query传参使用详解
Sep 12 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
Ant Design的Table组件去除
Oct 24 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
php 生成WML页面方法详解
2009/08/09 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
最短的IE判断代码
2011/03/13 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JavaScript实现区块链
2018/03/14 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
python操作oracle的完整教程分享
2018/01/30 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
利用python进行数据加载
2021/06/20 Python