JavaScript forEach 按数组顺序执行的三个维度分析

JavaScript 的 forEach 方法是严格按照数组索引顺序执行的，我们可以从三个维度分析其执行机制：

维度一：基本执行顺序

1. 同步顺序执行

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

arr.forEach((item, index) => {
    console.log(`索引 ${index}: 值 ${item}`);
});
// 输出顺序保证为: 0→1→2→3→4

2. 与 for 循环对比

const arr = [1, 2, 3];

// forEach
arr.forEach(item => console.log(item)); // 1, 2, 3

// for 循环（经典）
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 1, 2, 3
}

// for...of
for (const item of arr) {
    console.log(item); // 1, 2, 3
}
// 三者都按顺序执行，但 forEach 不能 break

维度二：特殊情况的顺序保证

3. 对稀疏数组的处理

const sparse = [1, , 3, , 5]; // 有空元素的数组

sparse.forEach((item, index) => {
    console.log(index, item); 
    // 只输出: 0→1, 2→3, 4→5
    // 空元素被跳过，但顺序不变
});

4. 在迭代中修改数组

const arr = [1, 2, 3, 4];

arr.forEach((item, index, array) => {
    if (index === 1) {
        array.push(99); // 在迭代中添加元素
    }
    console.log(item); 
});
// 输出: 1, 2, 3, 4
// 新增的 99 不会被迭代，因为 forEach 使用初始长度

维度三：异步和嵌套场景

5. 异步函数中的顺序

async function processArray() {
    const arr = [1, 2, 3];

    // 注意：forEach 不等待异步操作完成
    arr.forEach(async (item) => {
        await new Promise(resolve => 
            setTimeout(() => {
                console.log(item);
                resolve();
            }, 100 - item * 10)
        );
    });
    console.log('forEach 已开始，但未完成');
    // 可能输出: 3, 2, 1（因定时器时长不同）
}

processArray();
// 使用 for...of 可保证异步顺序：
async function inOrder() {
    for (const item of arr) {
        await asyncTask(item); // 顺序执行
    }
}

6. 嵌套 forEach 的顺序

const matrix = [[1, 2], [3, 4], [5, 6]];

matrix.forEach((row, i) => {
    console.log(`开始行 ${i}`);
    row.forEach((cell, j) => {
        console.log(`  单元格[${i},${j}]: ${cell}`);
    });
});
// 输出顺序：
// 开始行 0
//   单元格[0,0]: 1
//   单元格[0,1]: 2
// 开始行 1
//   单元格[1,0]: 3
//   单元格[1,1]: 4
// 开始行 2...

执行顺序总结表

实际应用建议

// 1. 需要顺序处理异步时
async function processInOrder(arr) {
    for (const item of arr) {
        await doAsyncTask(item); // ✅ 顺序执行
    }
}

// 2. 需要提前退出时
for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) break; // ✅ 可中断
    // forEach 无法 break
}

// 3. forEach 最佳场景
arr.filter(x => x > 0)       // 过滤
   .map(x => x * 2)          // 转换
   .forEach(x => console.log(x)); // 顺序输出

关键点总结

forEach 的设计保证了确定性执行顺序，但在异步或需要流程控制时需谨慎使用。