【JavaScript】forEach 遍历数组详解_js 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);});输出结果：
12345在这个示例中，forEach 方法会依次遍历 numbers 数组，并对每个元素执行 console.log 操作，输出对应的值。
2. 使用索引
forEach 方法的第二个参数 index 可以用来获取当前元素的索引。在某些情况下，索引信息对处理数组元素非常有用。例如：
const fruits = [\'apple\', \'banana\', \'cherry\'];fruits.forEach(function(fruit, index) { console.log(`${index}: ${fruit}`);});输出结果：
0: apple1: banana2: cherry3. 访问原数组
除了当前元素和索引外，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); // 603. 异步操作
虽然 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
- react
- vue
