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 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
介绍一下28个JS常用数组方法
May 06 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
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python利用百度AI实现文字识别功能
2018/11/27 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python内置模块collections知识点总结
2019/12/19 Python
详解Python 函数参数的拆解
2020/09/02 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
数据库笔试题
2013/05/09 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
电钳专业个人求职信
2014/01/04 职场文书
班主任对学生的评语
2014/04/26 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
小学校长个人总结
2015/03/03 职场文书