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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
常用的javascript设计模式
Jan 11 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
关于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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php array_walk() 数组函数
2011/07/12 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
vue2过滤器模糊查询方法
2018/09/16 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python3解释器知识点总结
2019/02/19 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
如何定义TensorFlow输入节点
2020/01/23 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
幼儿园秋游感想
2014/03/12 职场文书
岗位职责风险点
2014/03/12 职场文书
教代会闭幕词
2015/01/28 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
幼儿园教师求职信
2015/03/20 职场文书
实习护士自荐信
2015/03/25 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL