数组迭代方法

数组是JavaScript中最常用的数据结构之一，处理数组时经常需要对元素进行遍历或转换。JavaScript提供了多种内置的数组迭代方法，它们不仅能简化代码，还能提高可读性和功能性。

数组迭代方法的基本概念

数组迭代方法是指对数组中的每个元素执行特定操作的方法。这些方法通常接收一个回调函数作为参数，回调函数会被应用到数组的每个元素上。与传统的for循环相比，迭代方法更简洁且功能更强大。

const numbers = [1, 2, 3, 4, 5];

forEach方法

forEach是最简单的迭代方法之一，它对数组中的每个元素执行一次回调函数。与for循环不同，forEach没有返回值，仅用于执行副作用操作。

numbers.forEach((number) => {
  console.log(number * 2);
});
// 输出: 2, 4, 6, 8, 10

回调函数接收三个参数：当前元素、当前索引和数组本身。如果不需要后两个参数，可以省略它们。

numbers.forEach((number, index) => {
  console.log(`索引 ${index}: 值 ${number}`);
});

map方法

map方法创建一个新数组，其结果是原数组中的每个元素调用回调函数后的返回值。map不会修改原数组，而是返回一个新数组。

const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

回调函数的返回值会被添加到新数组中。如果回调函数没有显式返回任何值，新数组的对应位置会是undefined。

const emptyReturns = numbers.map(() => {});
console.log(emptyReturns); // [undefined, undefined, undefined, undefined, undefined]

filter方法

filter方法创建一个新数组，包含所有通过回调函数测试的元素。回调函数返回一个布尔值，如果为true，当前元素会被包含在新数组中。

const evens = numbers.filter((number) => number % 2 === 0);
console.log(evens); // [2, 4]

filter常用于从数组中移除不符合条件的元素。例如，过滤掉空字符串或null值：

const mixedValues = [1, null, 'hello', '', undefined, 42];
const truthyValues = mixedValues.filter(Boolean);
console.log(truthyValues); // [1, 'hello', 42]

reduce方法

reduce方法对数组中的每个元素执行一个回调函数，将其结果汇总为单个返回值。回调函数接收四个参数：累加器、当前值、当前索引和数组本身。

const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15

初始值是可选的，如果不提供，reduce会使用数组的第一个元素作为初始值，并从第二个元素开始迭代。但在空数组上调用reduce而不提供初始值会抛出错误。

const product = numbers.reduce((acc, curr) => acc * curr);
console.log(product); // 120

[].reduce((acc, curr) => acc + curr); // 抛出TypeError

some和every方法

some方法测试数组中是否至少有一个元素通过了回调函数的测试。一旦找到符合条件的元素，立即返回true，否则返回false。

const hasEven = numbers.some((number) => number % 2 === 0);
console.log(hasEven); // true

every方法测试数组中的所有元素是否都通过了回调函数的测试。如果所有元素都符合条件，返回true，否则返回false。

const allEven = numbers.every((number) => number % 2 === 0);
console.log(allEven); // false

find和findIndex方法

find方法返回数组中第一个满足回调函数测试的元素的值。如果没有找到符合条件的元素，返回undefined。

const firstEven = numbers.find((number) => number % 2 === 0);
console.log(firstEven); // 2

findIndex方法与find类似，但返回的是元素的索引而不是值。如果没有找到符合条件的元素，返回-1。

const firstEvenIndex = numbers.findIndex((number) => number % 2 === 0);
console.log(firstEvenIndex); // 1

flat和flatMap方法

flat方法创建一个新数组，其中所有子数组元素递归地连接到指定深度。默认深度为1。

const nested = [1, [2, [3, [4]]];
const flattened = nested.flat(2);
console.log(flattened); // [1, 2, 3, [4]]

flatMap方法首先使用map方法映射每个元素，然后将结果压缩一层。它相当于map后跟深度为1的flat。

const phrases = ['hello world', 'goodbye moon'];
const words = phrases.flatMap((phrase) => phrase.split(' '));
console.log(words); // ['hello', 'world', 'goodbye', 'moon']

迭代方法的链式调用

数组迭代方法可以链式调用，因为大多数方法都返回一个新数组。这种风格使代码更简洁易读。

const result = numbers
  .filter((number) => number > 2)
  .map((number) => number * 3)
  .reduce((acc, curr) => acc + curr, 0);

console.log(result); // 36 (3*3 + 4*3 + 5*3)

性能考虑

虽然迭代方法代码更简洁，但在处理大型数组时，某些方法的性能可能不如传统的for循环。例如，forEach通常比for循环慢，因为它需要为每个元素调用一次函数。

// 传统for循环
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

在性能关键的场景中，可能需要权衡代码简洁性和执行效率。现代JavaScript引擎已经优化了很多迭代方法，但在极端情况下仍需注意。