数组的扩展

109 阅读4分钟

1.扩展运算符

扩展运算符由三个点...表示,功能上就像rest的逆运算,将一个数组拆分成一个一个用逗号隔开的数据。扩展运算符也可以作为函数的参数使用。

image.png

image.png

由此引出很多方便快捷的操作:

1.替换apply方法

利用扩展运算符可以直接将数组转变成单独的数据,省去了apply方法相对比较繁琐的操作。以求数组元素最大值为例。

image.png

2.复制数组

在以前,复制数组需要concat()函数来变相复制一个数组,而使用扩展运算符可以很简单的一步到位。

image.png

3.合并数组

以前合并数组也需要用到concat()方法,扩展运算符也可以简化操作。

image.png

4.与解构赋值结合

将扩展运算符与结构赋值结合可以用来生成新数组,但是该参数只能放在最后,参考rest变量。

image.png

5.改变字符串

扩展运算符也可以将一个字符换变成数组,而且其能识别四个字节的Unicode字符。

image.png

image.png

所以涉及到四个字节的Unicode字符时优先选择扩展运算符处理,防止出现问题。

6.实现了Iterator接口的对象的数组化

任何定义了遍历器Iterator接口的对象,都可以用扩展运算符把他转换成真正的数组。

image.png 而没有定义Iterator的对象则不能。

image.png

由此也可以延伸,MapSetGenerator函数都可以使用扩展运算符。

2.Array.from()

Array.from()的作用和扩展运算符类似,但是比他更加强大。Array.from()用于将一个对象转换成一个数组,返回值是新数组,且他可以支持类数组对象(即必须拥有length属性)和可遍历对象,只要部署了Tterator接口,都可以将其转换为一个真正的数组。

image.png

即便该类数组对象中没有任何值都可以转换。

image.png

Array.from()可以接收第二个参数实现类似数组的map操作,对每个数据进行处理后返回新数组。

image.png

若函数内使用了this关键字,那么Array,from()还可以接收第三个参数用来绑定this

3.Array.of()

该方法主要用来弥补Array()的不足,因为当Array()的参数为0个、1个及2个以上时所生成的数组都不一样。而Array.of()则极为统一。

image.png

Array.of()基本可以替代Array()new Array()

4.实例方法copyWithin

该方法作用为:将指定位置的成员复制后覆盖到指定的另一个位置,该方法接收三个参数。

  1. target(必填):从该位置开始替换数据。
  2. start(可选):从该位置开始读取数据,默认为0.
  3. end(可选);从该位置停止数据读取,默认为数组的长度length

以上参数若为负值,则均表示从后往前。

image.png

5.实例方法find()findIdex()

这两个方法都用于寻找数组第一个符合条件的元素,符合则都返回该元素,不符合分别返回undefied-1,他们的第一个参数都是一个回调函数,该回调函数又可以接收三个参数,依次为:当前值、当前位置和原数组。这两个方法也可以接收第二个参数,用来绑定this指向。

image.png

image.png

6.实例方法fill()

该方法用于填充数组,接收三个参数:用于填充的元素、开始填充位置(默认为0)、结束填充位置(默认为数组结束)。若填充元素为对象,那么每一个填充进去的元素的内存地址是一样的。

image.png

7.实例方法entries()keys()values()

三者都用于遍历数组返回遍历器对象,区别是三者返回的结果不一样,key()返回键值,values()返回值,entries()返回键值对。返回值都可以用for...of遍历。

image.png

8.实例方法icludes()

此方法用于检测数组中是否包含该元素。返回一个布尔值。接收两个参数:被检测元素和检测起始位置(负数则从后往前,若超过了数组长度,则默认变成0)。

image.png

9.实例方法flat()flatMap()

flat()方法用于将不同嵌套的数组“拉平”,默认拉平一层且默认跳过空位,返回一个新数组且对原数组没有影响。当一个数组里面还有数组时就可以使用,flat()接收一个参数表示拉平多少层的数组。当不管多少层都需要拉平时可以把flat()参数写成Infinity

image.png

flatMap()方法先对数组每个数据执行括号内的函数方法,再拉平,但是仅能拉平一层。返回一个新数组,对原数组没有影响。

image.png

该方法接收第二个参数,用来绑定this值。

10.实例方法at()

此方法解决了数组不支持负索引的问题,at()方法支持负索引,表示从后往前找,若超出位置则返回undefined。且支持字符串和类型数组。

image.png