如何创建并使用对象数组（Array of Objects）-php教程-PHP中文网

如何创建并使用对象数组（Array of Objects）

本文详解如何在 javascript 中创建和操作对象数组，包括定义学生对象、将完整对象存入数组、以及安全访问对象属性的完整流程。

本文详解如何在 javascript 中创建和操作对象数组，包括定义学生对象、将完整对象存入数组、以及安全访问对象属性的完整流程。

在 JavaScript 中，“对象数组”指一个数组中每个元素都是一个独立的对象——它不是多个平行数组（如 names[]、grades[]、ids[]）的拼凑，而是将每个学生的全部信息封装为一个对象，并将该对象作为单个元素添加到数组中。这种结构更符合面向对象思维，也显著提升代码可维护性与数据一致性。

你的原始代码已正确创建了 student 对象：

var student = {
  name: document.getElementById("inp").value,
  grade: "A",
  id: 001
};

但关键问题在于这行代码：

studentArr.push(student.name); // ❌ 只推入姓名字符串

它仅将 name 属性（字符串）加入数组，丢失了 grade 和 id，导致无法构成真正的“学生对象数组”。

✅ 正确做法是将整个对象推入数组：

Kibana Saved Objects

通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。

下载

studentArr.push(student); // ✅ 推入完整对象

随后，你可以通过下标和点语法安全访问任意属性。例如，获取第一个学生的姓名和成绩：

console.log(studentArr[0].name);   // "张三"
console.log(studentArr[0].grade);  // "A"
console.log(studentArr[0].id);     // 1（注意：001 会被解析为十进制整数 1）

以下是优化后的完整 enter() 函数示例（含输入校验与 DOM 更新）：

function enter() {
  const nameInput = document.getElementById("inp").value.trim();
  const gradeInput = document.getElementById("inps").value.trim() || "A";
  const idInput = document.getElementById("inpsid").value.trim();

  // 基础校验：姓名不能为空
  if (!nameInput) {
    alert("请输入学生姓名！");
    return;
  }

  // 创建学生对象（ID 转为数字，避免前导零歧义）
  const student = {
    name: nameInput,
    grade: gradeInput.toUpperCase(),
    id: parseInt(idInput, 10) || Date.now() // 若未输入ID，用时间戳临时替代
  };

  // 将完整对象加入数组
  studentArr.push(student);

  // 动态更新页面显示（示例：列出所有学生信息）
  let displayHTML = "";
  for (let i = 0; i 学生 ${i + 1}：${s.name}（ID：${s.id}，成绩：${s.grade}）<br>`;
  }
  document.getElementById("iop").innerHTML = displayHTML;
}

⚠️ 注意事项：

避免使用 new Array()：推荐用字面量语法 [] 初始化数组，更简洁且无歧义；
ID 不要写 001：JavaScript 会将其解释为八进制（ES5）或报错（严格模式），应直接写 1 或由用户输入后用 parseInt() 转换；
不要依赖全局变量隐式声明：在函数内使用 let i 替代 for (i=0; ...)，防止污染作用域；
用户输入需清洗与校验：.trim() 去除空格，|| "A" 提供默认值，增强鲁棒性。