es6 提取数组对象一部分_ES6专题—扩展运算符和rest运算符(6)

68e7987c19ec0d3f1fe08c1571f9b044.png

1、扩展运算符简介

扩展运算符( spread )是三个点(...),可以将一个数组转为用逗号分隔的参数序列。

说的通俗易懂点,有点像化骨绵掌,把一个大元素给打散成一个个单独的小元素。

eb7f1106f79eb9558697bc1a1049a3e2.png

基本用法:拆解字符串与数组

var 

2、扩展运算符应用

2.1 某些场景可以替代apply

在使用Math.max()求数组的最大值时,ES5可以通过 apply 做到(用一种不友好且繁琐的方式)

// ES5 apply 写法

幸运的是JavaScript的世界在不断改变,扩展运算符可用于数组的析构,优雅的解决了这个问题。

// ES6 扩展运算符 写法

先把 array 打散成 1 2 3 4 3,再在里面找最大的那一个,就显而易见了。

2.2 代替数组的push、concat 等方法

实现把 arr2 塞到 arr1 中

// ES5 apply 写法

扩展运算符又要施展化骨大法了

// ES6 扩展运算符 写法

通俗的解释下, 扩展运算符先把 arr2 打散成 3 4 5 , 之后再往arr1里push,就轻松多了。

同理可推,concat 合并数组的时候:

var 

ES5的合并数组写法,像是 arr1 把 arr2,arr3 给吸收了。

而ES6的合并数组写法,则是先把 arr1,arr2, arr3 拆解,之后塞到新的数组中。

2.3 拷贝数组或对象

//拷贝数组

无论是像克隆数组还是对象,先用化骨绵掌之扩展运算符,将其打散,之后再拼装的到一起就可以了,多么简单易用。

aebb3b0ab26eaf13849ad79792113dc8.png

2.4 将伪数组转化为数组

//伪数组转换为数组

上面代码中,querySelectorAll 方法返回的是一个 nodeList 对象。它不是数组,而是一个类似数组的对象。

这时,扩展运算符可以将其转为真正的数组,原因就在于 NodeList 对象实现了 Iterator。

注意:使用扩展运算符将伪数组转换为数组有局限性,这个类数组必须得有默认的迭代器且伪可遍历的。

3、rest 运算符简介

剩余运算符(the rest operator),它的样子看起来和展开操作符一样,但是它是用于解构数组和对象。在某种程

度上,剩余元素和展开元素相反,展开元素会“展开”数组变成多个元素,剩余元素会收集多个元素和“压缩”成一个

单一的元素。

说的通俗点,有点像吸星大法,收集多个元素,压缩成单一的元素 。

f0dce1257a3e3d82219bc72f4848da05.png

rest参数用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变

量将多余的参数放入数组中。

例如实现计算传入所有参数的和

使用arguments参数:

function 

使用rest参数:

function 

上面代码利用 rest 参数,可以向该函数传入任意数目的参数。传递给 sumRest 函数的一组参数值,被整合成了数组 m。

就像是吸星大法,把分散的元素收集到一起。

所以在某些场景中,无需将arguments转为真正的数组,可以直接使用rest参数代替。

4、rest 运算符应用

4.1 rest 参数代替arguments变量

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}
​
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

上面的两种写法,比较后可以发现,rest 参数的写法更自然也更简洁。

不过,rest参数和arguments对象有一定的区别:

c4ad419c8ceb9416a0476dd4e4c9d228.png

4.2 与解构赋值组合使用

var 

备注:rest参数可理解为剩余的参数,所以必须在最后一位定义,如果定义在中间会报错。

var 

5、总结

5.1 扩展运算符和rest运算符是逆运算

扩展运算符:数组=>分割序列

rest运算符:分割序列=>数组

09cf2f46342405221646b604f19c8a25.png

5.2 扩展运算符应用场景

由于其繁琐的语法,apply 方法使用起来并不是很方便。当需要拿一个数组的元素作为函数调用的参数时,

扩展运算符是一个不错的选择。

扩展运算符还改善了数组字面量的操作,你可以更方便的初始化、连接、复制数组了。

使用析构赋值你可以提取数组的一部分。通过与迭代器协议的组合,你可以以一种更灵活的方式使用该表达式。

5.3 rest运算符应用场景

rest运算符主要是处理不定数量参数,rest参数使得收集参数变得非常简单。它是类数组对象arguments一个合理的替代品。

rest参数还可以与解构赋值组合使用。

在实际项目中灵活应用扩展运算符、rest运算符,能写出更精简、易读性高的代码。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值