ECMAScript 2021 (ES12) 中新的 Array 方法详解-FunTeaLearn Online Web Tutorials

在 ECMAScript 2021（ES12）中，我们可以看到一些新的、令人振奋的 Array 方法，这些方法可以让我们更方便地处理数组。在本文中，我们将详细解释这些新的方法，并给出一些实例代码，以便更好地说明它们的用法。

`Array.prototype.at()`

Array.prototype.at() 方法可以在数组中根据指定的索引位置获取元素。如果索引越界，则返回 undefined。它的语法如下：

arr.at(index)

例子：

const arr = ['a', 'b', 'c'];
console.log(arr.at(0)); // "a"
console.log(arr.at(1)); // "b"
console.log(arr.at(-1)); // "c"
console.log(arr.at(3)); // undefined

`Array.prototype.filter()`

Array.prototype.filter() 方法可以根据指定的条件过滤出数组中的元素，并返回一个新数组。它的语法如下：

arr.filter(callback(element[, index[, array]])[, thisArg])

其中，callback 函数接受三个参数：element 表示当前数组元素，index 表示当前元素的下标，array 表示当前的数组对象，可以省略第二个和第三个参数。thisArg 为 callback 函数调用时的 this 值。

例子：

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter((item) => item > 3);
console.log(filteredArr); // [4, 5]

`Array.prototype.flatMap()`

Array.prototype.flatMap() 方法可以对数组中每个元素执行一个映射转换，并返回一个新的、扁平化的数组。它的语法如下：

arr.flatMap(callback[, thisArg])

例子：

const arr = [1, 2, 3];
const mappedArr = arr.flatMap((item) => [item * 2, item * 3]);
console.log(mappedArr); // [2, 3, 4, 6, 6, 9]

`Array.prototype.reduceRight()`

Array.prototype.reduceRight() 方法可以从数组的末尾开始遍历，并将回调函数的返回值和下一个元素一起作为下一次调用的参数。它的语法如下：

arr.reduceRight(callback[, initialValue])

其中，callback 函数接受四个参数：accumulator 表示上一次调用后的返回值，currentValue 表示当前元素的值，currentIndex 表示当前元素的下标，array 表示当前的数组对象。initialValue 为初始值。

例子：

const arr = [1, 2, 3];
const reducedValue = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue);
console.log(reducedValue); // 6

`Array.prototype.findLast()`

Array.prototype.findLast() 方法可以在数组中从末尾开始查找符合条件的第一个元素，并返回该元素。如果没有符合条件的元素，则返回 undefined。它的语法如下：

arr.findLast(callback[, thisArg])

例子：

const arr = [1, 2, 3];
const lastFoundValue = arr.findLast((item) => item > 1);
console.log(lastFoundValue); // 3

`Array.prototype.findIndexLast()`

Array.prototype.findIndexLast() 方法可以在数组中从末尾开始查找符合条件的第一个元素，并返回该元素的下标。如果没有符合条件的元素，则返回 -1。它的语法如下：

arr.findIndexLast(callback[, thisArg])

例子：

const arr = [1, 2, 3];
const lastIndexFound = arr.findIndexLast((item) => item > 1);
console.log(lastIndexFound); // 2

`Array.prototype.copyWithin()`

Array.prototype.filter() 方法可以将数组中指定范围内的元素复制到数组的指定位置。它的语法如下：

arr.copyWithin(target[, start[, end]])

其中，target 表示替换的目标位置，start 表示复制的开始位置，默认为 0，end 表示复制的结束位置，默认为数组结束位置。

例子：

const arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, 3)); // [4, 5, 3, 4, 5]

`Array.prototype.includes()`

Array.prototype.includes() 方法可以判断数组中是否包含指定的元素，如果包含则返回 true，否则返回 false。它的语法如下：

arr.includes(searchElement[, fromIndex])

其中，searchElement 表示要搜索的元素，fromIndex 表示搜索的起始位置，默认为 0。

例子：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(5)); // true
console.log(arr.includes(6)); // false
console.log(arr.includes(5, 3)); // true

总结：

在 ECMAScript 2021（ES12）中，我们介绍了六个新的 Array 方法，包括 Array.prototype.at()、Array.prototype.filter()、Array.prototype.flatMap()、Array.prototype.reduceRight()、Array.prototype.findLast() 和 Array.prototype.findIndexLast()、Array.prototype.copyWithin()、以及Array.prototype.includes()。这些新的方法可以极大地方便我们对数组的处理。在实际使用中，需要注意这些方法的用法，以便更好地完成项目。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64c9c9c55ad90b6d0418218b

ECMAScript 2021 (ES12) 中新的 Array 方法详解