当前位置:首页 > 日记 > 正文

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

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

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扩展运算符的用途,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

excel2010图表制作滚动条控件的方

excel2010图表制作滚动条控件的方

图表,滚动条,方法,控件,电脑软件,  在Excel中制作好图表之后经常需要用到滚动条控件,具体该如何制作滚动条控件呢?下面是由小编分享的excel2010图表制作滚动条控件的方法,以供大家阅读和学习。excel2010图表制作滚动条控件的方法图表制作滚…

详解微信小程序 登录获取unionid

详解微信小程序 登录获取unionid

登录,详解,程序,电脑软件,微信小,详解微信小程序 登录获取unionid首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号…

冻结2007excel表格前三行的方法步

冻结2007excel表格前三行的方法步

冻结,步骤,多列,方法,表格,  excel2007中,冻结功能是一个经常使用的功能,它能随意冻结一些行或列。下面让小编为你带来学习冻结excel表格前三行的方法,希望对你有帮助!了解更多excel表格的操作技巧,欢迎点击▼▼▼  ???excel表格设置打印A4…

jQuery实现可拖动进度条实例代码

jQuery实现可拖动进度条实例代码

拖动,实例代码,进度条,电脑软件,jQuery,html   <div class="progress"> <div class="progress_bg"> <div class="progress_bar"></div> </div> <div class="progress_btn"></div> <div class="text">0%</div> </d…

qq旋舞搞笑个性签名

qq旋舞搞笑个性签名

个性签名,搞笑,大全,电脑软件,qq,  一句搞笑个性签名:话是人说的,屁也是人放的,说话和放屁一样,都是一口气而已。下面小编给大家分享了关于qq旋舞搞笑个性签名,希望你喜欢。qq旋舞搞笑个性签名大全1) 哎呦我去,您这么忙还亲自上厕所那。2) 遇到…

ppt2013 删除背景的方法

ppt2013 删除背景的方法

方法,删除,背景,电脑软件,  记得以前上初中时,小编就很喜欢powerpoint里的一个设置图片背景透明的功能,可以将纯色背景的图片去掉背景,已经不记得那是哪个版本了。如今,电脑上装的已经是2013,当时的功能已经变成了&lsquo;删除背景&rsquo;,而且…

微信小程序 页面传值详解

微信小程序 页面传值详解

页面传值,详解,程序,电脑软件,微信小,微信小程序 页面传值详解一. 跨页面传值.1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受.如果需要传多个参数, 用 & 链接即…

QQ音乐设置铃声的方法手机QQ音乐怎

QQ音乐设置铃声的方法手机QQ音乐怎

音乐,设置,方法,音效,铃声,  通过手机QQ音乐,可以设置自己喜欢的音乐做铃声了。那么应该如何设置呢?那接下来就随小编一起来看看QQ音乐设置铃声的方法吧!点击下方查看更多手机QQ音乐相关内容&darr;&darr;&darr;  ?&hearts;?&hearts;手机Q…

excel 2007界面改2003界面教程exce

excel 2007界面改2003界面教程exce

界面,教程,标识,不同之处,怎么改,  在Excel2007中,界面改版比较大,有很多用户不习惯用07版本的,因此可能需要改变07版本的界面,下面是小编带来的关于excel 2007界面改2003界面教程的内容,欢迎阅读!excel 2007界面改2003界面教程怎样将Excel 20…

怎样给WPS演示2013设置自动保存时

怎样给WPS演示2013设置自动保存时

设置自动,演示,时间,电脑软件,WPS,  有时候我们费尽心血完成制作,却因为小小的失误而导致文档损坏或者是丢失,没有来得及保存,这种绝望。设置WPS演示2013自动保存,可以防止类似的事情发生。以下是小编为您带来的关于给WPS演示2013设置自动保…

2013版ppt怎样将相册导出为视频

2013版ppt怎样将相册导出为视频

方法,视频,电脑软件,ppt,  我们在ppt中完成电子相册的制作后,可以将其导出为视频文件,这有利于文件的保存,下面就让小编告诉你怎样将ppt2013相册导出为视频 的方法,希望看完本教程的朋友都能学会并运用起来。ppt2013相册导出为视频的方法使用…

基于JavaScript实现滑动门效果

基于JavaScript实现滑动门效果

滑动门,效果,电脑软件,JavaScript,本文实例为大家分享了滑动门效果的具体代码,供大家参考,具体内容如下滑动门效果: 原理:一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示。 假设图片的宽度是120px,其他三道门露出的宽度是80px。…