在 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])
其中,callback
函数接受三个参数:element
表示当前数组元素,index
表示当前元素的下标,array
表示当前的数组对象,可以省略第二个和第三个参数。thisArg
为 callback
函数调用时的 this
值。
例子:
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])
其中,callback
函数接受三个参数:element
表示当前数组元素,index
表示当前元素的下标,array
表示当前的数组对象,可以省略第二个和第三个参数。thisArg
为 callback
函数调用时的 this
值。
例子:
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])
其中,callback
函数接受三个参数:element
表示当前数组元素,index
表示当前元素的下标,array
表示当前的数组对象,可以省略第二个和第三个参数。thisArg
为 callback
函数调用时的 this
值。
例子:
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()
。这些新的方法可以极大地方便我们对数组的处理。在实际使用中,需要注意这些方法的用法,以便更好地完成项目。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c9c9c55ad90b6d0418218b