如何创建对象数组？项目中对象数组实现困惑求助

现有代码的核心问题 #

• 你当前只把student.name存入数组，而不是整个student对象，直接丢失了grade和id的关联信息
• grade和id是硬编码的固定值，没有读取输入框里用户实际输入的内容
• 循环拼接完学生信息后，没有把结果插入到页面元素中展示

修正步骤 #

1. 创建完整学生对象：从三个输入框分别读取name、grade、id的值，生成包含所有属性的对象
2. 存入完整对象到数组：用studentArr.push(student)把整个对象推进数组，而非单个属性
3. 遍历对象数组展示信息：循环时访问每个对象的name、grade、id属性，拼接成完整的学生信息展示
4. 优化用户体验：添加清空输入框的逻辑，方便用户继续添加新学生

修正后的完整代码 #

<br>
<p><b>Student Name:</b></p>
<input id="inp" type="text"><br><br>

<p><b>Grade:</b></p>
<input id="inps" type="text"><br><br>

<p><b>Student ID:</b></p>
<input id="inpsid" type="text"><br><br>

<button type="button" onclick="enter()">Enter</button><br><br>

<button type="button" onclick="construct()">Constructor</button>
<p>Student List:</p>

<p id="studentList"></p><br>

<script>
  // 初始化存储学生对象的数组
  var studentArr = [];

  function enter() {
    // 读取三个输入框的值并去除首尾空格
    var name = document.getElementById("inp").value.trim();
    var grade = document.getElementById("inps").value.trim();
    var studentId = document.getElementById("inpsid").value.trim();

    // 简单校验：确保输入不为空
    if (!name || !grade || !studentId) {
      alert("请填写完整的学生信息");
      return;
    }

    // 创建完整的学生对象
    var student = {
      name: name,
      grade: grade,
      id: studentId
    };

    // 将整个学生对象推入数组
    studentArr.push(student);

    // 拼接所有学生的信息
    var stuval = "";
    for (var i = 0; i < studentArr.length; i++) {
      var stu = studentArr[i];
      stuval += `学生${i+1}: 姓名=${stu.name}, 成绩=${stu.grade}, 学号=${stu.id}<br>`;
    }

    // 将结果展示到页面
    document.getElementById("studentList").innerHTML = stuval;

    // 清空输入框
    document.getElementById("inp").value = "";
    document.getElementById("inps").value = "";
    document.getElementById("inpsid").value = "";
  }
</script>

补充说明 #

• 对象数组的核心是数组里的每个元素都是一个完整的对象，这样每个元素能包含该学生的所有关联信息，比并行数组更易维护
• 如果需要用构造函数创建学生对象，可参考以下写法：

function Student(name, grade, id) {
  this.name = name;
  this.grade = grade;
  this.id = id;
}
// 创建对象时使用：new Student(name, grade, studentId)

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