基于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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
Vue父子传递实例讲解
Feb 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
微信小程序自定义组件
2017/08/16 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Django自带的用户验证系统实现
2020/12/18 Python
python模块内置属性概念及实例
2021/02/18 Python
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
Ejb技术面试题
2015/04/29 面试题
自考生自我评价分享
2014/01/18 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
购房意向书
2014/04/01 职场文书
人力资源管理求职信
2014/08/07 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书