基于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 相关文章推荐
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
json的使用小结
Jun 08 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
js实现常见的工具条效果
Mar 02 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
分享几个超级震憾的图片特效
2012/01/08 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python编程之Re模块下的函数介绍
2017/10/28 Python
python验证码识别实例代码
2018/02/03 Python
python程序 创建多线程过程详解
2019/09/23 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python时间日期操作方法实例小结
2020/02/06 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
办理信用卡工作证明
2014/09/30 职场文书
师德先进个人材料
2014/12/20 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
Redis高并发缓存架构性能优化
2022/05/15 Redis
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技