今天讲一下数组的拓展方法;
拓展运算符(spread)

可以很直观的看到他的作用 是将一个数组转为用逗号分隔的参数序列。
该运算符用在函数的调用
例如

注意只有在函数调用时,才可以放在圆括号中,否则会报错。
扩展运算符的出现代替了函数apply方法;

因为在ES5中,push方法的参数不能是数组,所以只能通过apply方法变通使用push方法,有了spead方法,就可以直接将数组传入push方法。
它有那些应用呢?

先看看这个:
数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全选的数组。
上述代码中,a2并不是a1 的克隆,而是同一份数据的另一个指针。修改a2,会直接导致a1的变化。
ES5中只能用变通的方法来复制数组。

a1会返回原数组的克隆,在修改a2就不会对a1产生影响了。


两种方法都是克隆;
扩展运算符提供了数组合并的新方法。

但是这样两种方法都是浅拷贝。
扩展运算符也可以和解构赋值一起使用,用于生成数组;

但是如果将扩展运算符用于解构赋值,只能放在参数的最后一位,否则会报错。
扩展运算符还可以将字符串转为真正的数组。

Array.from();
此方法用于将类似数组的对象和可遍历的对象转为真正的数组,从而使用数组的方法;


然鹅在实际应用中,常见的类似数组的对象是DOM操作返回的Nodelist集合。以及内部函数arguments对象。用此方法就可以将他们转为真正的数组。
只要是部署了Iterator接口的数据结构,Array.from都可以将其转为数组。
Array.from()还支持类似数组的对象,本质特征只有一点。必须拥有length属性。

而且此方法还可以接收第二个参数,类似于数组map的方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.of()
此方法用于将一组值,转为数组。

上面描述中,可以看懂。一个参数,两个参数,及三个参数每次返回的值不同。参数只有一个正整数时,实际上指定数组的长度。参数个数不少于2个时,才返回由参数组成的新数组。
Array.of(),总是返回参数值组成的数组。如果没有参数,就会返回一个空数组。

find();
此方法用于找出第一个复合条件的数组成员,参数是一个回调函数,所有的成员依次执行该回调函数,直到找到第一个返回值为true的成员。然后返回该成员,没有找到。返回undefined。


上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值,当前的位置,以及原数组。
findIndex():此方法和find()方法非常类似,返回的是第一个条件的数组成员位置。如果都不符合返回-1;
fill();
此方法使用给定值,填充一个数组。
此方法用于填充空数组非常方便,但是数组中已有的元素,会被全部抹去,
此方法还可以接受第二个和第三个参数。用于指定填充的其实位置和结束位置。

flat();
此方法用于将嵌套的数组‘拉平’,变成一维数组,该方法返回一个数组,对原数据没有影响。

但是。此方法默认拉平一层,可以进行传参,将参数写成一个整数,表示想要拉平的层数,默认为1.
flatMap();
此方法的作用是,对原数组的每个成员执行一次函数,然后在对返回值进行flat()方法。
返回值:返回一个新数组,
不会改变原数组。

但是默认只能展开一层,
此方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员,当前数组成员的位置(从零开始),原数组;
at();
ES6之前,数组不支持负索引,先要引用数组的最后一个成员,只能使用arr[arr.length-1];
ES6中增加了新方法,可以支持负数索引。

如果参数位置超出了数组范围,at()返回undefined;
网友评论