ES6-数组的扩展

1.Array.from()

Array.from方法用于将伪数组[ 类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）],转为真正的数组，从而可以使用数组的方法。

那我们先看看在ES5中是如何操作的

let obj_1 = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr_1 = Array.prototype.slice.call(obj_1); // ['a', 'b', 'c']

ES6中操作的话

// ES6的写法
let arr_2 = Array.from(obj_1); // ['a', 'b', 'c']

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

2.Array.of()方法返回参数值组成的数组。

在ES5中我们定义数组可以通过Array()或new Array()或者[]的方式直接定义数组，但是前两种方法有个不足，因为参数个数的不同，会导致Array()的行为有差异。举个例子：

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

其中参数个数小于2则代表的是数组的长度，而大于2时则代表数组元素，其行为不统一。Array.of()方法则避免了这种不足，它的参数只代表数组元素

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

3.copyWithin()

该方法在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当原数组。

它接受三个参数。

target（必需）：从该位置开始替换数据。
start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

4.find()和findIndex()

find（）用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 2;
}) // 5

[1, 4, -5, 10].find((n) => n < 0)
// -5

findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置索引，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

5.ES6提供三个新的方法——`entries()`，`keys()`和`values()`——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用`for...of`循环进行遍历，唯一的区别是`keys()`是对键名的遍历、`values()`是对键值的遍历，`entries()`是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

扫描二维码关注公众号，回复： 4776736 查看本文章

1.Array.from()

2.Array.of()方法返回参数值组成的数组。

3.copyWithin()

4.find()和findIndex()

猜你喜欢