如何在 JavaScript 中利用 Array.forEach() 优雅地遍历处理数组中的每一项-java教程-PHP中文网

foreach按索引升序遍历已存在元素，跳过稀疏空位；不响应遍历中数组修改，无法中断循环；不改变原数组但允许回调内修改；不兼容类数组和空数组，无返回值，适用于纯副作用操作。

如何在 javascript 中利用 array.foreach() 优雅地遍历处理数组中的每一项

Array.forEach() 是 JavaScript 中最直观、最常用的数组遍历方法之一，它不返回新数组（返回 undefined），而是专注于“对每一项执行某个操作”。用它处理数组时，代码简洁、意图清晰，非常适合副作用操作（如打印、修改外部变量、发起请求、更新 DOM 等）。

基本语法与核心特点

forEach 接收一个回调函数作为参数，该函数会为数组中每个**已赋值的元素**（跳过空位）依次调用：

Gradle 9.8.0

下载

回调函数默认接收三个参数：当前元素（item）、当前索引（index）、原数组（array）
它不会改变原数组，也不支持中断（没有 break 或 return false 跳出循环）
无法链式调用（因为返回 undefined），若需转换或筛选，请改用 map() 或 filter()

常见实用场景与写法

✅ 批量更新 DOM 元素：
比如给多个按钮统一绑定点击事件：

const buttons = document.querySelectorAll('.action-btn');
buttons.forEach((btn, i) => {
  btn.addEventListener('click', () => console.log(`第 ${i + 1} 个按钮被点击`));
});

✅ 收集或累加信息（配合外部变量）：
统计字符串数组中总字符数：

let totalLength = 0;
['hello', 'world', 'js'].forEach(str => totalLength += str.length);
console.log(totalLength); // 15

✅ 发起并行请求（注意：非等待顺序执行）：
适合不需要按序等待响应的场景：

const urls = ['/api/user/1', '/api/user/2', '/api/user/3'];
urls.forEach(url => fetch(url).then(res => res.json()).then(data => console.log(data)));

需要避开的典型误区

误以为能跳出循环：在 forEach 回调里写 return 只是退出当前回调，不会终止整个遍历。真要提前退出，请改用 for...of 或 some()/every()
混淆 this 绑定：回调中的 this 默认是 undefined（严格模式）。如需指定上下文，可传入第二个参数：arr.forEach(callback, thisArg)
对稀疏数组行为误解：forEach 会跳过未定义的空槽（如 [1, , 3] 中间那个位置），但不会跳过 undefined 值（如 [1, undefined, 3] 会触发三次）