JavaScript对象数组无法遍历？控制台显示异常求解决方案

嘿，我遇到过完全一样的坑！结合你描述的情况——控制台展开book能看到6个元素，但typeof返回object、length输出0，for...of根本跑不起来——大概率是下面几种情况之一，给你几个靠谱的解决办法：

先试试最直接的：用Object.values()遍历 #

如果你的book是个类数组对象（看起来像数组但不是标准Array实例），或者是length被手动改坏了的数组，Object.values()可以直接提取所有可枚举的属性值，不管length是多少：

for (let item of Object.values(book)) {
  // 你的业务逻辑写这里就行
}

如果需要索引的话：用Object.keys() #

要是遍历的时候还得用到索引，就用Object.keys()拿到所有键，再逐个取值：

for (let key of Object.keys(book)) {
  const item = book[key];
  // 这里写逻辑，key就是你看到的0、1、2这些索引
}

转成标准数组再遍历 #

如果控制台显示book的__proto__是Array（也就是它本质上是数组，但length属性出问题了），可以强制转成标准数组：

// 方法1：Array.from
const realBookArray = Array.from(book);
// 方法2：展开运算符
const realBookArray = [...book];

// 现在用for...of就正常了
for (let item of realBookArray) {
  // 你的逻辑
}

不过要是length被硬改成0但实际有属性，Array.from可能不好使，这时候还是Object.values()更稳。

还要排查是不是控制台的“假象” #

浏览器控制台有个坑叫惰性求值：你打印book的时候，它只是存了个引用，等你展开的时候才去读最新的属性。但你打印book.length的时候，book可能还没被填充（比如是异步请求回来的数据，你在请求完成前就执行了代码）。

这时候你可以用console.log(JSON.stringify(book))看看代码执行时book的真实状态——如果输出的是空数组或者length为0，那就是你遍历早了，得等数据加载完再执行遍历，比如放在异步回调里：

// 举个例子，假设你用fetch拿数据
fetch('/your-book-api')
  .then(res => res.json())
  .then(book => {
    console.log(book.length); // 这里肯定是6
    for (let item of book) {
      // 逻辑代码
    }
  });

为啥会出现这种奇葩情况？ #

简单说几个常见原因：

1. 控制台的惰性显示：刚才说过了，展开看到的是最新状态，但代码执行时book还没被赋值完成。
2. 类数组对象：比如DOM的NodeList、或者后端返回的结构像数组但不是Array的对象，它们没有Array的迭代器，for...of不认，而且length可能是个只读属性或者和实际元素数不匹配。
3. 数组被瞎改了：比如有人手动设置了book.length = 0，但没删掉那些索引属性，这时候控制台能看到元素，但length是0，for...of是按length来遍历的，所以就不执行了。

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