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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
关于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在Web开发领域的优势
2006/10/09 PHP
如何去掉文章里的 html 语法
2006/10/09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
Javascript & DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
python文件和目录操作函数小结
2014/07/11 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
python yield和Generator函数用法详解
2020/02/10 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
心理健康课教学反思
2014/02/13 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
小学六年级学生评语
2014/04/22 职场文书
争先创优活动总结
2014/08/27 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
四风之害观后感
2015/06/09 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang