【JavaScript】`forEach` 方法的详解与实战_js foreach
文章目录
在 JavaScript 中，
forEach方法是数组对象的重要组成部分。它提供了一种简洁、优雅的方式来遍历数组中的每个元素，并对其执行指定操作。本文将详细介绍forEach方法的基本概念、用法、常见的应用场景、与其他遍历方法的对比，并提供实战示例，帮助您全面掌握这一强大的工具。
一、forEach 方法的基本概念
forEach 方法用于遍历数组，并对每个元素执行一次给定的回调函数。与传统的 for 循环不同，forEach 方法简化了遍历操作，使代码更为简洁。
语法：
array.forEach(callback(currentValue[, index[, array]])[, thisArg])- callback：对每个元素执行的函数，接收三个参数：
currentValue：当前处理的元素。index（可选）：当前处理元素的索引。array（可选）：调用forEach方法的数组。
- thisArg（可选）：执行回调时用作
this的值。
二、基本用法示例
下面是一个简单的例子，使用 forEach 方法遍历一个数组并打印每个元素：
const numbers = [1, 2, 3, 4, 5];numbers.forEach(number => { console.log(number);});// 输出: 1 2 3 4 5在这个示例中，forEach 方法对 numbers 数组中的每个元素执行回调函数，并将当前元素作为参数传递给回调函数。
三、使用索引与数组参数
forEach 方法的回调函数还可以接收当前元素的索引和原数组作为参数。下面是一个使用索引参数的例子：
const fruits = [\'apple\', \'banana\', \'cherry\'];fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`);});// 输出: // 0: apple// 1: banana// 2: cherry在这个示例中，forEach 方法将当前元素的索引作为第二个参数传递给回调函数。
四、使用 thisArg 参数
可以通过 thisArg 参数为回调函数绑定一个特定的 this 值。下面是一个使用 thisArg 的例子：
function Counter() { this.count = 0; this.increment = function() { this.count++; };}const counter = new Counter();const numbers = [1, 2, 3];numbers.forEach(function() { this.increment();}, counter);console.log(counter.count); // 输出: 3在这个示例中，通过 thisArg 参数将 counter 对象绑定为回调函数的 this 值，使得 increment 方法能够正确地更新 count 属性。
五、常见应用场景
- 数组元素的简单处理
forEach 常用于对数组元素进行简单处理，如打印元素、计算总和等。
const numbers = [1, 2, 3, 4, 5];let sum = 0;numbers.forEach(number => { sum += number;});console.log(sum); // 输出: 15- 修改数组中的对象属性
forEach 可以用于修改数组中的对象属性，例如将所有用户的年龄增加一岁：
const users = [ { name: \'Alice\', age: 25 }, { name: \'Bob\', age: 30 }, { name: \'Charlie\', age: 35 }];users.forEach(user => { user.age++;});console.log(users);// 输出: // [// { name: \'Alice\', age: 26 },// { name: \'Bob\', age: 31 },// { name: \'Charlie\', age: 36 }// ]- 与 DOM 操作结合
forEach 常与 DOM 操作结合，用于处理节点列表：
const listItems = document.querySelectorAll(\'li\');listItems.forEach(item => { item.style.color = \'blue\';});六、与其他遍历方法的对比
forEach 方法与其他遍历方法如 map、filter 和 reduce 有着不同的用途和特点。
forEach vs map
forEach：用于遍历数组并对每个元素执行操作，不返回新数组。map：用于遍历数组并对每个元素执行操作，返回一个新数组。
const numbers = [1, 2, 3, 4, 5];// 使用 forEachconst doubledNumbers1 = [];numbers.forEach(num => { doubledNumbers1.push(num * 2);});// 使用 mapconst doubledNumbers2 = numbers.map(num => num * 2);console.log(doubledNumbers1); // 输出: [2, 4, 6, 8, 10]console.log(doubledNumbers2); // 输出: [2, 4, 6, 8, 10]forEach vs filter
forEach：用于遍历数组并对每个元素执行操作，不返回新数组。filter：用于筛选数组中的元素，返回一个新数组，包含所有通过测试的元素。
const numbers = [1, 2, 3, 4, 5];// 使用 forEachconst evenNumbers1 = [];numbers.forEach(num => { if (num % 2 === 0) { evenNumbers1.push(num); }});// 使用 filterconst evenNumbers2 = numbers.filter(num => num % 2 === 0);console.log(evenNumbers1); // 输出: [2, 4]console.log(evenNumbers2); // 输出: [2, 4]forEach vs reduce
forEach：用于遍历数组并对每个元素执行操作，不返回新数组。reduce：用于将数组归约为一个单一值。
const numbers = [1, 2, 3, 4, 5];// 使用 forEachlet sum1 = 0;numbers.forEach(num => { sum1 += num;});// 使用 reduceconst sum2 = numbers.reduce((acc, num) => acc + num, 0);console.log(sum1); // 输出: 15console.log(sum2); // 输出: 15七、注意事项和最佳实践
- 不改变原数组结构
forEach 方法不会返回新数组，因此不应在 forEach 回调中直接修改原数组的结构，避免意外的副作用。
- 减少副作用
尽量保持 forEach 回调函数的纯粹性，避免对外部状态的修改，从而提高代码的可维护性。
- 合理选择遍历方法
根据具体需求选择合适的遍历方法，forEach 适合需要执行副作用操作的场景，而 map、filter 和 reduce 更适合需要返回新数组或计算结果的场景。
八、实战示例
示例 1：批量更新DOM元素
假设我们有一组待处理的DOM元素，需要批量更新它们的样式：
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul>const listItems = document.querySelectorAll(\'li\');listItems.forEach(item => { item.style.color = \'red\';});示例 2：异步操作
使用 forEach 执行异步操作，例如批量发送请求：
const urls = [\'url1\', \'url2\', \'url3\'];urls.forEach(async (url) => { const response = await fetch(url); const data = await response.json(); console.log(data);});.
