挑战:使用forEach

基础概念

forEach 是 JavaScript 中数组的一个方法，用于遍历数组中的每个元素，并对每个元素执行一个提供的函数。它是一种同步的、单线程的操作，适用于处理数组中的数据。

优势

1. 简洁易读：forEach 提供了一种简洁的方式来遍历数组，代码更易读。
2. 内置方法：作为数组的内置方法，无需额外引入库或模块。
3. 灵活性：可以传递一个回调函数，该函数可以访问当前元素、索引以及整个数组。

类型

forEach 方法接受一个回调函数作为参数，该回调函数可以有以下几种类型：

1. 函数表达式：
2. 函数表达式：
3. 箭头函数：
4. 箭头函数：

应用场景

forEach 适用于以下场景：

1. 遍历数组并处理每个元素：
2. 遍历数组并处理每个元素：
3. 遍历对象数组并处理每个对象：
4. 遍历对象数组并处理每个对象：

常见问题及解决方法

问题：forEach 中的回调函数无法跳出循环

原因：forEach 方法没有提供类似于 break 或 return 的机制来跳出循环。

解决方法：可以使用 some 或 every 方法来替代 forEach，因为它们可以在满足条件时提前终止循环。

const numbers = [1, 2, 3, 4, 5];
numbers.some(num => {
    if (num === 3) {
        console.log('Found 3');
        return true; // 终止循环
    }
    console.log(num);
});
// 输出: 1, 2, Found 3

问题：forEach 中的异步操作无法按预期执行

原因：forEach 是同步的，无法等待异步操作完成。

解决方法：可以使用 for...of 循环结合 async/await 来处理异步操作。

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

async function processNumbers() {
    for (const num of numbers) {
        await new Promise(resolve => setTimeout(() => {
            console.log(num * 2);
            resolve();
        }, 1000));
    }
}

processNumbers();
// 输出: 2 (1秒后), 4 (2秒后), 6 (3秒后), 8 (4秒后), 10 (5秒后)

参考链接

• MDN Web Docs - Array.prototype.forEach