本文详解如何在 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) 会以缩进格式完整展开对象/数组，清晰呈现嵌套结构，且对非对象值（数字、布尔等）无副作用。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
⚠️ 注意：data?.[key] 使用可选链操作符，防止 data 或其属性为 null/undefined 时抛错。
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] 访问原对象属性。
? 总结要点
- [object Object] 是控制台默认字符串化对象的表现形式，不代表数据损坏；
- 模板字符串中拼接对象会触发隐式 toString()，应改用 JSON.stringify() 调试；
- 遍历混合结构对象时，务必用 Array.isArray() 区分数组与其他类型；
- 访问嵌套属性优先使用可选链（?.）和空值合并（??），提升鲁棒性；
- 不要对数组执行字符串拼接后再尝试索引访问——保持数据原始类型是正确操作的前提。
掌握这些模式后，无论是解析 API 响应、处理配置对象，还是构建动态 UI，都能从容应对深层次嵌套的数据结构。
