如何正确访问 JavaScript 对象中嵌套的数组及其内部属性-js教程-PHP中文网

如何正确访问 JavaScript 对象中嵌套的数组及其内部属性

本文详解如何在 JavaScript 中安全、准确地遍历对象并区分处理普通属性与嵌套数组，避免 [object Object] 的显示问题，并正确提取如 arr[0].num 等深层值。

本文详解如何在 javascript 中安全、准确地遍历对象并区分处理普通属性与嵌套数组，避免 `[object object]` 的显示问题，并正确提取如 `arr[0].num` 等深层值。

在 JavaScript 开发中，遇到类似如下结构的 JSON 数据时，开发者常因不熟悉对象与数组的混合遍历逻辑而陷入困惑：

{
  "current": true,
  "values_remaining": 443,
  "color": "blue",
  "type": "1",
  "time": 20444,
  "category": "story",
  "id": "kflaghe",
  "score": 1270,
  "arr": [
    {"num": 293, "person": "pera", "val": "K3344"},
    {"num": 407, "person": "perb", "val": "B5637"},
    {"num": 256, "person": "perc", "val": "J4526"}
  ]
}

当你使用 for...in 循环配合模板字符串（如 `${data[key]}`）打印所有键值对时，普通字段（如 score: 1270）能正常显示，但 arr 字段却输出为 arr: [object Object],[object Object],[object Object]——这并非数据异常，而是 JavaScript 在隐式字符串转换时对对象调用 toString() 方法的结果（返回固定字符串 "[object Object]"），本质是显示问题，而非访问失败。

✅ 正确做法：区分类型 + 显式序列化或遍历

1. 调试阶段：用 JSON.stringify() 清晰查看任意值

若仅需调试输出，推荐在模板字符串中对值做安全序列化：

for (const key in data) {
  console.log(`${key}: ${JSON.stringify(data?.[key], null, 2)}`);
}

JSON.stringify(value, null, 2) 会以缩进格式完整展开对象/数组，清晰呈现嵌套结构，且对非对象值（数字、布尔等）无副作用。

⚠️ 注意：data?.[key] 使用可选链操作符，防止 data 或其属性为 null/undefined 时抛错。

javascript-typescript-typescript-scaffold
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

2. 实际业务逻辑：按类型分支处理

若需分别处理基础字段与数组字段（例如渲染列表、计算总和），应显式判断类型：

for (const key in data) {
  const value = data[key];

  if (Array.isArray(value)) {
    console.log(`→ Found array under key "${key}":`, value.length, "items");
    // 遍历数组中的每个对象
    value.forEach((item, index) => {
      console.log(`  [${index}] num=${item.num}, person="${item.person}", val="${item.val}"`);
      // ✅ 此处可安全访问 item.num、item.person 等属性
    });
  } else {
    console.log(`${key}: ${value}`);
  }
}

3. 直接访问嵌套数组元素（无需循环）

若你已明确知道路径（如获取第一个 arr 元素的 num 值），直接使用点号或方括号语法即可：

// ✅ 安全访问（推荐加可选链和空值检查）
const firstNum = data?.arr?.[0]?.num;
console.log(firstNum); // 输出: 293

// ❌ 错误示例（原文中问题根源）：
// var arr = (`${data[key]}`); // → 将数组转为字符串 "[object Object],..."
// var arrValue = arr[0];      // → 取字符串首字符 "["，再 .num → undefined

关键错误在于：将数组强制转为字符串后，它就不再是数组，而是一个普通字符串，自然无法用 [0] 访问原对象属性。