读取大型JSON文件时嵌套Object Array循环取值异常问题求助

嘿，我完全懂你现在的头疼点！当你遍历外层数组时直接输出内层对象数组，浏览器/控制台就会默认显示[object Object]，因为它不知道你要展示对象里的具体内容；而用JSON.stringify()虽然能看到完整结构，但确实没法直接拿来用或者展示。嵌套循环确实是解决这个问题的核心思路，我给你一步步拆解清楚：

为什么会出现[object Object]？ #

当你直接把一个对象（或者对象数组）当作字符串输出时，JavaScript会自动调用它的toString()方法，而对象的默认toString()返回的就是[object Object]——不是数据有问题，只是你没正确提取对象里的具体内容而已。

具体解决方法：嵌套遍历 #

假设你的数据结构大概是这样的（模拟你的场景）：

const outerArray = [
  {
    id: 1,
    name: "外层条目1",
    innerArray: [{ key: "inner1", value: "内容1" }, { key: "inner2", value: "内容2" }]
  },
  {
    id: 2,
    name: "外层条目2",
    innerArray: [{ key: "inner3", value: "内容3" }]
  }
];

方法1：嵌套map遍历（适合生成新数组/UI元素场景） #

如果是处理数据或者生成UI（比如React组件），嵌套map是很常用的方式，直接提取内层对象的具体属性即可：

const processedData = outerArray.map(outerItem => {
  // 遍历外层对象时，同时处理它的内层数组
  const innerContent = outerItem.innerArray.map(innerItem => {
    // 返回你需要的内层属性，比如拼接成可读字符串，或者返回新对象
    return `${innerItem.key}: ${innerItem.value}`;
    // 如果是React场景，可能是：return <div key={innerItem.key}>{innerItem.value}</div>;
  });
  // 组合外层信息和处理后的内层内容
  return {
    ...outerItem,
    readableInner: innerContent.join(' | ') // 转成友好的字符串，也可以保留数组形式
  };
});

console.log(processedData);

方法2：嵌套forEach遍历（适合直接打印/处理内容） #

如果只是想在控制台或页面上输出内容，forEach的写法会更直观：

outerArray.forEach(outerItem => {
  console.log(`外层条目：${outerItem.name}`);
  // 针对当前外层对象的内层数组做循环
  outerItem.innerArray.forEach(innerItem => {
    // 直接打印内层的具体属性，而非整个对象
    console.log(`  内层内容：${innerItem.key} - ${innerItem.value}`);
  });
});

关键提醒：别直接输出整个对象 #

不管用哪种循环，核心都是不要直接输出整个内层对象，而是访问它的具体键（比如innerItem.title、innerItem.id这类你实际需要的属性），这样就能得到可读的内容，而不是[object Object]了。

如果你的实际数据结构和示例略有不同，只要遵循“外层循环拿到单个外层对象，再对该对象内的内层数组做二次循环”的思路调整就行，本质逻辑是一致的～

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