JavaScript 是一种面向对象的动态语言，它的一大特性是数组类型，而数组在 JavaScript 中又扮演极为重要的角色，因为它可以方便存储并操作一组数据。然而，在实际项目中，使用数组时经常会遇到一些问题，因此本文汇总了 JavaScript 数组中的一些常见问题，并介绍了 ECMAScript 2021 新特性，以便读者更好地优化项目代码。
常见问题
如何遍历数组
遍历数组是使用数组时的常见操作，而 JavaScript 提供了多种方式来遍历数组。
for 循环
const arr = [1, 2, 3, 4]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}for...of
const arr = [1, 2, 3, 4]
for (const item of arr) {
console.log(item)
}forEach
const arr = [1, 2, 3, 4]
arr.forEach((item) => {
console.log(item)
})map
const arr = [1, 2, 3, 4]
arr.map((item) => {
console.log(item)
})注意：
forEach和map本身不返回新的数组，而map返回一个新的数组。
如何处理数组中的重复项
在实际项目中，我们常常会遇到需要将数组中的重复项删除或者合并的情况。
原生方法去重
const arr = [1, 2, 2, 3, 3, 3, 4] const uniqueArr = Array.from(new Set(arr)) console.log(uniqueArr) // [1, 2, 3, 4]
原生方法合并
const arr1 = [1, 2, 3] const arr2 = [2, 3, 4] const arr3 = [4, 5, 6] const newArr = [...new Set([...arr1, ...arr2, ...arr3])] console.log(newArr) // [1, 2, 3, 4, 5, 6]
如何查找数组中的项
JavaScript 中提供了一些原生方法来处理数组中的元素查找问题，例如 indexOf、lastIndexOf 和 find、findIndex。
indexOf 和 lastIndexOf
const arr = [0, 1, 2, 1, 0] console.log(arr.indexOf(1)) // 1 console.log(arr.lastIndexOf(1)) // 3
find 和 findIndex
-- -------------------- ---- ------- ----- --- - -- --- -- ----- ------- -- - --- -- ----- -------- -- - --- -- ----- ------ -- ----- ---- - --------------- -- ------- --- -- ----------------- -- - --- -- ----- ------- - ----- ----- - -------------------- -- ------- --- -- ------------------ -- -
如何删除数组中的项
在 JavaScript 中，我们也需要对数组进行删除、插入元素等操作。其中，删除数组中的项是最为常见的操作之一。可以使用 splice 方法实现。
const arr = [0, 1, 2, 1, 0] arr.splice(2, 1) console.log(arr) // [0, 1, 1, 0]
如何合并多个数组
在实际项目中，我们常常会遇到需要将多个数组合并成一个数组的情况，这时候可以使用 concat 方法。
const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] const arr3 = [7, 8, 9] const newArr = arr1.concat(arr2, arr3) console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
ECMAScript 2021 新特性
随着 ECMAScript 2021 的发布，JavaScript 又迎来了一些新特性，这些新的特性让开发者们处理数组问题更加方便。
Array.prototype.at
ES2021 给 Array.prototype 新增了一个 at 方法，这个方法接受一个索引值，返回该索引在数组中对应的值。
const arr = [1, 2, 3, 4] console.log(arr.at(1)) // 2
Array.prototype.flat
在 ES2021 中，数组的 flat 方法又得到了增强，它可以通过传递可选的数字参数使数组扁平化到指定层数。
-- -------------------- ---- ------- ----- --- - ---- --- --- --- ---- --- --- ----------------------- -- --- -- -- -- --- --- -- -- ------------------------ -- --- -- -- -- --- --- -- -- ------------------------ -- --- -- -- -- -- -- --
Array.prototype.flatMap
flatMap 是 ES2021 中新增的一个数组方法，它将数组扁平化后每个元素都映射到一个函数，并拼合成一个新数组。
const arr = [1, 2, 3] console.log(arr.flatMap((x) => [x * 2])) // [2, 4, 6]
总之，以上新特性有助于让开发者更好地使用数组，优化项目代码，并提高项目的性能。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cf6826e46428fe9eaace11