如何遍历嵌套数组并正确读取其中的嵌套属性值？

问题原因 #

• 你的messageArr定义语法不符合JS规范：数组[]仅支持按索引访问的有序元素，不能直接写入messageA: [xxx]这种键值对结构，你需要的外层和内层嵌套结构都应该是对象{}。
• 遍历逻辑错误：你拿到键名key后没有用它索引到对应的子对象，直接访问messageArr.content相当于访问外层根对象的content属性，该属性不存在自然没有输出。

修正方案 #

1. 先修正数据结构定义

如果需要按messageA、messageB的键名索引数据，使用如下对象结构：

var messageArr = {
  messageA: {
    weight: 1,
    type: "pop up",
    content: "lorem ipsum",
  },
  messageB: {
    weight: 3,
    type: "tile",
    content: "Hello world",
  },
}

如果你确实需要用数组存储，推荐写成带标识字段的对象数组格式：

var messageArr = [
  {
    id: 'messageA',
    weight: 1,
    type: "pop up",
    content: "lorem ipsum",
  },
  {
    id: 'messageB',
    weight: 3,
    type: "tile",
    content: "Hello world",
  }
]

2. 对应修正遍历逻辑

如果是键值对对象结构，遍历写法：

for (var key of Object.keys(messageArr)) {
  // 用key取到对应子对象后再访问content属性
  console.log(messageArr[key].content);
}

如果是对象数组结构，遍历写法更简单：

messageArr.forEach(item => {
  console.log(item.content);
})

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