ES6扩展运算符的用途实例详解


Posted in Javascript onAugust 20, 2017

ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性。

扩展运算符就是三个点“...”,就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用。

看这个例子:

console.log(...[3, 4, 5])

结果:

3 4 5

调用其实就是:

console.log(3, 4, 5)

合并数组

可以使用扩展运算符将多个数组进行合并。

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log([...arr1, ...arr2, ...arr3])

结果:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

函数多参数传递, 替换Apply

先把参数定义成数组,函数定义好。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
 console.log( a1, a2, a3, a4)
}

在ES6前,要把数组参数传递给函数,要么按照下标访问数组元素去调用函数,缺点是数组个数和函数参数个数完全绑定,有一个个数发生变化,那么就要修改了。

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

要么就用Apply进行调用,结果当然是没毛病,也是ES6之前用的最多的。

fun1.apply(null, arr4)

如果是用扩展运算符,那就方便咯。

fun1(...arr4)

结果:

arg1 arg2 arg3 arg4

调用简洁爽快。

与解构配合赋值

配合使用,可以从数组中提取除第一个以后的所有元素成另外一个数组。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)

结果:

1
[ 2, 3, 4, 5, 6 ]

但要注意,与解构配合时,扩展运算符只能用在最后一个上,否则报错。

可以展开实现了Iterator 接口的对象

比如Map,Set,数组就是从Iterator接口实现来的,Object不是,所以扩展Object会报错。

扩展Set。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)

结果:

1 2 3

扩展Map。

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)

结果:

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

注意,扩展出来的一个个的数组,按照map的键值对结构,每个数组都是2个元素,一个是key,一个是value。

如果扩展Object,就会报错。

let obj1 = {
  p1: 1,
  p2: 2,
  p3: 3
}
console.log(...obj1)

报错。

总结

以上所述是小编给大家介绍的ES6扩展运算符的用途,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
vue配置多页面的实现方法
May 22 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
关于JavaScript的单双引号嵌套问题
Aug 20 #Javascript
Vue动态组件实例解析
Aug 20 #Javascript
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
Vue组件实例间的直接访问实现代码
Aug 20 #Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 #Javascript
React Native 环境搭建的教程
Aug 19 #Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
PHP程序员编程注意事项
2008/04/10 PHP
php foreach、while性能比较
2009/10/15 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
python实现简单图片物体标注工具
2019/03/18 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
python中数字是否为可变类型
2020/07/08 Python
python输入中文的实例方法
2020/09/14 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
医学生个人求职信范文
2013/09/24 职场文书
一夜的工作教学反思
2014/02/08 职场文书
处级干部考察材料
2014/12/24 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
Python绘制分类图的方法
2021/04/20 Python