forEach循环问题：输出goodItem.name至表格仅显示最后一个值如何修复？

嘿，这个问题太常见了！我猜你大概率是在forEach循环里直接对结果变量做了赋值操作（而不是累加/收集），或者误解了forEach中return的作用——毕竟forEach本来就不是用来收集返回值的工具。

为什么会出现这个问题？ #

forEach的设计只是用来遍历数组、执行回调函数，它不会收集回调里的return值，而且回调里的return仅仅是终止当前这一次的迭代，对其他元素的遍历没有影响。如果你的代码是类似下面这样：

let tableRow = '';
goodItems.forEach(goodItem => {
  // 每次循环都覆盖tableRow，最后自然只剩最后一个元素的值
  tableRow = `<tr><td>${goodItem.name}</td></tr>`;
});
// 插入到表格中
document.querySelector('#your-table tbody').innerHTML = tableRow;

那每次循环都会把tableRow替换成当前元素的行代码，最后当然只会显示最后一个goodItem.name。

两种简单的修复方案 #

方案1：在forEach里累加结果

如果坚持要用forEach，那需要把每次生成的行代码累加到结果变量里，而不是直接赋值：

let tableRows = '';
goodItems.forEach(goodItem => {
  // 用+=来拼接，而不是=
  tableRows += `<tr><td>${goodItem.name}</td></tr>`;
});
// 渲染到表格
document.querySelector('#your-table tbody').innerHTML = tableRows;

方案2：用map方法（更推荐）

map方法天生就是用来将数组的每个元素转换为新值并返回新数组的，比forEach更适合这种场景。我们可以用map生成所有行的字符串数组，再用join('')把它们拼成完整的HTML代码：

const tableRows = goodItems.map(goodItem => {
  return `<tr><td>${goodItem.name}</td></tr>`;
}).join('');
// 渲染到表格
document.querySelector('#your-table tbody').innerHTML = tableRows;

甚至可以简化成一行：

document.querySelector('#your-table tbody').innerHTML = goodItems.map(item => `<tr><td>${item.name}</td></tr>`).join('');

关键总结 #

• 不要用forEach来收集返回值，它的定位是"执行操作"，不是"转换数组"；
• 如果需要转换数组生成新结果，优先用map；
• 要是非得用forEach，记得用累加（+=）或者往数组里push元素，而不是每次覆盖变量。

内容的提问来源于stack exchange，提问作者михаил лебедев