如何访问JavaScript对象中的嵌套数组及其中的键值对？

你遇到的核心问题是把数组/对象直接转成字符串输出，以及后续错误地将数组转为字符串去访问属性。下面一步步解决：

为什么会显示[object Object]？ #

当你用${data[key]}这种模板字符串方式输出时，JavaScript会自动调用对象的toString()方法，而数组里的对象默认toString()返回[object Object]，多个对象就会拼成[object Object],[object Object],[object Object]。

错误代码的问题 #

你写的这段代码：

var arr= (`${data[key]}`);
var arrValue = arr[0];
console.log(arrValue.num);

这里${data[key]}把数组转成了字符串，比如变成"[object Object],[object Object],[object Object]"，此时arr[0]取的是字符串的第一个字符[，自然没有num属性，所以输出undefined。

正确的访问方式 #

方法1：直接访问嵌套数组并遍历

你可以直接通过data.arr拿到数组，然后遍历每个对象：

// 直接获取arr数组
const arr = data.arr;
// 遍历数组里的每个对象
arr.forEach(item => {
  console.log(`num: ${item.num}, person: ${item.person}, val: ${item.val}`);
  // 也可以单独访问某个属性，比如console.log(item.num)
});

方法2：在原有的for-in循环中处理数组

如果想在原来的循环里统一处理所有属性，可以判断当前值是否为数组，再针对性处理：

for (const key in data) {
  if (Array.isArray(data[key])) {
    // 是数组，遍历里面的对象
    console.log(`${key}:`);
    data[key].forEach(item => {
      console.log(`  - num: ${item.num}, person: ${item.person}, val: ${item.val}`);
    });
  } else {
    // 普通属性，正常输出
    console.log(`${key}: ${data[key]}`);
  }
}

方法3：快速查看数组完整结构（调试用）

如果只是调试时想看到数组的完整结构，可以用console.dir()或者JSON.stringify()：

// 用console.dir打印完整层级结构
console.dir(data.arr);
// 或者转成格式化的JSON字符串输出
console.log(`arr: ${JSON.stringify(data.arr, null, 2)}`);

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