JavaScript中forEach遍历数组举例详解

前言

JavaScript 中 forEach 方法是一种常见且非常有用的数组遍历方式，广泛用于对数组中的每个元素执行某种操作。本文将详细介绍 forEach 方法的使用方式、优缺点以及实际应用场景，帮助开发者更好地掌握这一常见的数组遍历技术。

一、forEach 方法概述

1. forEach 方法简介

forEach 是 JavaScript 数组的一个原型方法，用于对数组中的每个元素依次执行给定的函数。与传统的 for 循环不同，forEach 通过回调函数的形式来处理数组元素，简化了数组遍历的代码书写，并提高了代码的可读性和可维护性。

2. 语法结构

forEach 方法的基本语法如下：

array.forEach(function(currentValue, index, array) {
  // 执行的操作
});

• currentValue：数组中正在处理的当前元素。
• index：当前元素的索引（可选）。
• array：当前正在遍历的数组（可选）。

3. forEach 方法的特性

• 不改变原数组：forEach 方法只会对数组中的每个元素执行回调函数，不会修改原数组本身。
• 无法中途停止：forEach 方法无法通过 break 或 return 提前终止循环。如果需要中途退出循环，应该考虑使用 for 循环或 some、every 等方法。

二、forEach 方法的基本用法

1. 遍历数组元素

forEach 最常见的用途就是遍历数组中的元素，对每个元素执行相应的操作。以下是一个简单的示例：

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

numbers.forEach(function(number) {
  console.log(number);
});

输出结果：

1
2
3
4
5

在这个示例中，forEach 方法会依次遍历 numbers 数组，并对每个元素执行 console.log 操作，输出对应的值。

2. 使用索引

forEach 方法的第二个参数 index 可以用来获取当前元素的索引。在某些情况下，索引信息对处理数组元素非常有用。例如：

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit, index) {
  console.log(`${index}: ${fruit}`);
});

输出结果：

0: apple
1: banana
2: cherry

3. 访问原数组

除了当前元素和索引外，forEach 方法还可以访问正在遍历的数组本身。虽然在大多数情况下不需要直接操作原数组，但在某些场景下，这个特性非常有用。例如：

const letters = ['a', 'b', 'c'];

letters.forEach(function(letter, index, array) {
  console.log(array);
});

输出结果：

['a', 'b', 'c']
['a', 'b', 'c']
['a', 'b', 'c']

每次回调函数执行时，array 参数都会指向原数组。

三、forEach 方法的实际应用

1. 修改 DOM 元素

forEach 可以用于遍历页面上的元素集合，并对每个元素进行操作。例如，通过 forEach 遍历所有的 div 元素，并为它们添加一个类：

const divs = document.querySelectorAll('div');

divs.forEach(function(div) {
  div.classList.add('highlight');
});

在这个例子中，forEach 遍历了所有 div 元素，并为每个 div 元素添加了 highlight 类。

2. 累加数组元素

forEach 也可以用于累加数组中的元素。虽然 reduce 方法在累加操作中更常用，但 forEach 也能达到类似的效果：

const numbers = [10, 20, 30];
let sum = 0;

numbers.forEach(function(number) {
  sum += number;
});

console.log(sum); // 60

3. 异步操作

虽然 forEach 是同步执行的，但它可以很好地与异步操作结合使用。例如，遍历一组数据并对每个数据项进行异步请求：

const urls = ['url1', 'url2', 'url3'];

urls.forEach(async function(url) {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
});

在这个例子中，forEach 结合 async/await，为每个 URL 发送请求并输出返回的数据。

四、forEach 方法的优缺点

1. 优点

• 简洁优雅：forEach 的语法简洁明了，代码可读性高，特别是与传统的 for 循环相比。
• 无需管理索引：forEach 自动处理索引，无需像 for 循环那样手动初始化、递增索引变量，减少了出错的可能性。
• 不改变原数组：forEach 方法不会修改原数组，保证了数据的不可变性，符合函数式编程的理念。

2. 缺点

• 无法中断循环：forEach 无法中途停止循环，无法通过 break 或 return 来提前退出。对于需要条件判断的场景，for 或 every、some 方法可能是更好的选择。
• 性能问题：在某些情况下，forEach 的性能可能不如 for 循环。在需要进行高性能、大规模数据处理的场景中，传统的 for 循环有时会表现得更好。
• 异步处理：forEach 不适用于异步循环，因为它不会等待异步操作完成。虽然可以结合 async/await 使用，但这并非它的主要设计用途。

五、forEach 与其他遍历方法的对比

1. for 循环

for 循环是最基础的数组遍历方法，可以灵活控制遍历的开始、结束条件及增量。与 forEach 相比，for 循环可以通过 break 提前退出，但代码相对繁琐。

for (let i = 0; i < array.length; i++) {
  // 逻辑
}

2. map 方法

map 方法与 forEach 类似，都是对数组元素进行遍历，但 map 方法会返回一个新数组。forEach 适用于只需要遍历但不返回新数组的场景，而 map 适合在遍历的同时生成新的数组。

const numbers = [1, 2, 3];
const doubled = numbers.map(function(number) {
  return number * 2;
});
console.log(doubled); // [2, 4, 6]

3. filter 方法

filter 方法也是遍历数组的一种方式，它会根据回调函数的返回值生成一个新的数组，包含所有返回 true 的元素。相比之下，forEach 只执行回调函数，不生成新数组。

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evens); // [2, 4]

六、注意事项

1. 不要修改原数组

尽量避免在 forEach 方法内部修改原数组，虽然 forEach 不会改变数组，但在回调函数中对原数组的修改可能会导致意料之外的结果。

2. 异步场景的处理

如前所述，forEach 不适合异步操作。在需要处理异步请求的场景中，使用 for...of 循环结合 async/await 通常是更好的选择。

七、总结

forEach 是 JavaScript 中一个非常强大且易于使用的数组遍历方法。它简化了数组操作的代码书写，特别适合需要对数组元素执行某些操作的场景。然而，forEach 也有其局限性，如无法中途退出和不适用于异步操作。因此，在实际开发中，应该根据具体需求选择最合适的数组遍历方式。

到此这篇关于JavaScript中forEach遍历数组的文章就介绍到这了,更多相关JS中forEach遍历数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！