优秀的编程知识分享平台

网站首页 > 技术文章 正文

ES6之扩展运算符的精彩操作(...扩展运算符)

nanyue 2024-10-11 13:40:58 技术文章 4 ℃

扩展运算符用三个点号表示,功能是把数组展开成一系列用逗号隔开的值

简单理解就是你把一个数组前面加三个点,它就会展开成你想要的形状。

没有扩展运算符的苦逼生活:

let arr = [1,2,3,4]
console.log(arr[0], arr[1], arr[2], arr[3]) // 1 2 3 4

有了扩展运算符之后的生活:

let arr = [1,2,3,4]
console.log(...arr) // 1 2 3 4

可以大家会好奇什么时候会用到?

数组拼接

在我们日常开发中经常会用到数组拼接对吧?比如做电商网站的时候会有商品拼接,做论坛也会有帖子拼接之类的!

就是说我们后台可能会有几千几万条帖子或帖子之类的,我们不可能一下子全获取到,那页面要加载的时间太长了,比如淘宝,你输入一件商品,一点搜索,嗖!它把那个商品几万条一下子全给你了,然后手机凉了,垃圾软件!卸啦!

所以一般我们都是10条20条这样子,当用户触发某个行为一直再更多的数据,比如上拉触底!但是我们也知道,我们不可能在获取到新数据就覆盖旧数据!那体验效果也太差了!

所以我们一般都是那新获取的数据去拼接你刚刚的数组。

以前我们都是用concat来做数组的拼接工作。

有了扩展运算符之后:

这只是一种写法,你还可以:旧数组.push(...新数组),这样也可以啦!

克隆数组:

大家都知道,js数据类型分为简单数据类型和引用类型。引用类型的变量只是指向内存空间的一个指针,如果我们想直接克隆的话,只是克隆了一份指向内存空间的指针而已。(相当于钥匙)

举例:我们把内存空间比作一个房间,这个房间里有很多零食(数组的下边对应的值或对象的属性对应的值)你有一把这个房间的钥匙,你朋友也有一把(有两个都指向这个内存空间的指针,你可以把指针理解为变量),然后你朋友用钥匙开门,拿走了一些零食喂他女朋友了,当你开门时,你会发现零食少了很多!

但是使用扩展运算符的话就可以一行代码实现深度克隆:

关键代码就是: let arr2 = [...arr1]

当然,扩展运算符肯定不止这些啦,其实它主要用于函数调用。

函数调用

加载我们这个方法需要传入很多形参,我们一般用arguments实参列表来处理!

嗯,没什么问题。。。

可以现在大家都用ES6的箭头函数了(箭头函数不改变this指向)

那么问题来了!!

箭头函数是没有arguments实参列表的!

哼哼,这个时候我们就可以用神一样的扩展运算符来轻松应对:

还有,当我们使用call(),改变this指向的时候需要穿形参是,使用扩展运算符也是超棒的选择:

ps: call()和apply()的作用是改变this指向,区别是传参列表不同。

最近发表
标签列表