JavaScript访问嵌套对象数组数据异常：预期返回"a"却得到0求助

嘿，我明白你遇到的问题了——嵌套结构加上for/in循环的坑确实容易让人懵！先帮你理清楚问题出在哪，再给你解决方案。

首先，先模拟一下你描述的简化数据结构（应该和你的实际结构类似）：

// 你的数据结构大概是这样：数组 → 对象 → 对象 → 二维数组
const nestedData = [
  {
    firstObj: {
      twoDArray: [["a", "b"], ["c", "d"]]
    }
  }
];

为什么你得到的是0而不是"a"？ #

问题出在for/in循环的特性上：

• 当你用for/in遍历数组时，它遍历的不是数组元素本身，而是数组的索引（字符串类型，比如"0"）
• 如果你的循环代码里误把这个索引变量当成了数组元素，或者直接输出了索引，就会得到0（字符串"0"会被隐式转换成数字0）

举个例子，如果你写了这样的代码：

for (let outerIdx in nestedData) {
  for (let objKey in nestedData[outerIdx]) {
    for (let arrKey in nestedData[outerIdx][objKey]) {
      // 这里如果直接打印arrKey，得到的就是"0"，转成数字就是0
      console.log(arrKey); 
    }
  }
}

这就是你拿到0的原因！

正确的解决方法 #

方法1：直接访问（最简便） #

既然你明确要取第一个数组第一个位置的值，完全不需要循环，直接通过层级访问即可：

const targetValue = nestedData[0].firstObj.twoDArray[0][0];
console.log(targetValue); // 输出 "a"

方法2：用正确的循环遍历（如果需要遍历所有元素） #

如果你确实需要遍历整个结构，别用for/in遍历数组，改用for...of或者数组的forEach方法，它们遍历的是数组元素本身：

// 用for...of遍历
for (const outerItem of nestedData) {
  for (const innerObj of Object.values(outerItem)) {
    for (const arr of innerObj.twoDArray) {
      console.log(arr[0]); // 会依次输出"a"、"c"
      // 如果只取第一个的话，拿到第一个就break
      break;
    }
    break;
  }
  break;
}

// 或者用forEach
nestedData.forEach(outerItem => {
  Object.values(outerItem).forEach(innerObj => {
    innerObj.twoDArray.forEach(arr => {
      console.log(arr[0]); // 输出"a"
      return; // 终止当前forEach
    });
  });
});

总结一下：for/in更适合遍历对象的键，遍历数组尽量用for...of、forEach或者普通的for循环（通过索引遍历），这样就不会把索引和元素搞混啦！

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