ES6扩展运算符的用途实例详解
- 更新时间：2022-06-29 09:21:25
- 编辑：向志强
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按概率随机生成事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2020-02-09
-
分享JavaScript中数组及对象合并方法示例代码
这篇文章主要介绍了JavaScript中的数组合并方法和对象合并方法,通过代码的形式给大家介绍的非常详细，需要的朋友可以参考下
发布时间：2020-03-01
-
详解javascript 数组的sort方法
在javascript中，数组对象有一个有趣的方法sort，它接收一个类型为函数的参数作为排序的依据。这意味着开发者只需要关注如何比较两个值的大小，而不用管排序这件事内部是如何实现的
发布时间：2020-02-09
-
深入理解JavaScript中双向数据绑定
这篇文章主要为大家详细介绍了JavaScript中双向数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2020-02-11
-
JavaScript中Promise使用
Promise，相信每一个前端工程师都或多或少地在项目中都是用过，毕竟它早已不是一个新名词。ES6中已经原生对它加以支持，在caniuse中搜索一下 Promise ，发现新版的chrome和firefox也已经支持。但是
发布时间：2020-01-27
-
javascript运算符中关于位运算符知识点总结
下面小编就为大家带来一篇javascript运算符——位运算符全面介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
发布时间：2021-05-08
-
jQuery中read和JavaScript中的onload函数的区别总结
这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下
发布时间：2019-11-12
-
实现JavaScript评论点赞功能的方法步骤
通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能。这篇文章主要介绍了JavaScript评论点赞功能的实现方法,需要的朋友可以参考下
发布时间：2020-01-29
-
JavaScript实现图片连播以及联级菜单的知识点
这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
发布时间：2020-01-07
-
JavaScript类框架知识点
这篇文章主要介绍了一个简单的JavaScript类框架,有助于初学者理解JS类的创建与继承,需要的朋友可以参考下
发布时间：2020-03-25
