在对象数组中使用forEach()方法渲染页面无值显示问题求助

嘿，我瞅了你的代码，发现几个新手常踩的小坑，咱们一步步掰扯清楚～

你的代码里的核心问题： #

1. 错误修改遍历对象
   你在forEach的回调里，把当前遍历的学生对象myElement直接用+=拼接字符串，这完全搞混了「对象」和「字符串」的用法！应该用你一开始定义的message变量来拼接HTML内容才对，你现在把对象改成了字符串，后面再访问myElement[key]肯定出问题。

2. for-in循环取值混乱
   你在for-in循环里，每次都把同一个myElement[key]塞到所有字段（Student、Track、Achievements这些）里，但学生对象的key是name、track这类，每循环一次只会拿到一个key，这样所有字段都会显示同一个值，完全不符合预期。而且这里根本没必要用for-in循环，直接访问属性更清晰。

3. 渲染时机错误
   你在forEach的每一次循环里都调用print函数，这样每次都会把output的内容覆盖成当前学生的信息，最后页面只会显示最后一个学生的内容。应该等所有学生的HTML都拼接完，再一次性渲染。

修正后的代码 #

let students = [
  { name: "Milla Jovovich", track: "Fullstack JavaScript", achievements: 5, points: 50 },
  { name: "Bjon Aarseth", track: "iOS Development", achievements: 7, points: 70 },
  { name: "Varg Oystein", track: "Front End Development", achievements: 12, points: 120 },
  { name: "Wilhelm Striepe", track: "Software Engineering", achievements: 9, points: 90 },
  { name: "Anders Hansen", track: "Data Science", achievements: 22, points: 220 }
];
let message = "";

function print(message) {
  let outputDiv = document.getElementById("output");
  outputDiv.innerHTML = message;
}

// 用forEach遍历每个学生对象
students.forEach(function(student) {
  // 直接对应每个属性拼接HTML
  message += "<h2>Student: " + student.name + "</h2>";
  message += "<p>Track: " + student.track + "</p>";
  message += "<p>Achievements: " + student.achievements + "</p>";
  message += "<p>Points: " + student.points + "</p>";
});

// 所有内容拼接完成后，一次性渲染到页面
print(message);

修正点说明： #

• 换回message变量来拼接HTML，不再修改遍历的学生对象；
• 直接访问学生对象的具体属性（name、track等），避免for-in循环带来的取值混乱；
• 把print调用移到forEach外面，确保所有学生的内容都拼接好后再统一渲染。

这样修改后，页面就能正常显示所有学生的完整信息啦～刚开始用forEach很容易踩这些小坑，多试几次就熟练啦！

内容的提问来源于stack exchange，提问作者HeavensGate666