JS for of遍历为何在Chromium抛出.for is not iterable错误？

复现代码 #

let arr = await fetch(...).then(r => r.json());
for(let [a, b] of arr) {
  console.log(a, b);
}

报错触发场景 #

只有当arr本身是可迭代对象、但迭代产出的单个值不支持迭代时，才会触发对应报错，常见场景包括：

• 接口返回的arr是一维数组，而非预期的二维数组，比如返回[1,2,3]而不是[[1,2],[3,4]]
• 接口返回的arr是Set、类数组等可迭代结构，但单个迭代产出是数字、字符串等不可迭代的基础类型
• 接口返回结构完全不符合预期，arr是普通对象但被错误实现了Symbol.iterator，迭代产出为非可迭代值

不同引擎报错差异根因 #

两类报错的本质都是数组解构时待解构值不支持迭代，差异来自不同JS引擎的报错提示生成逻辑：

• Chromium/Node.js使用的V8引擎：生成错误提示时存在语法拼接的小缺陷，误把for循环的语法结构和迭代检查逻辑拼接，才产出了语义模糊的TypeError: .for is not iterable提示，不代表实际错误点在for语法本身。
• Firefox使用的SpiderMonkey引擎：报错提示完全贴合实际执行逻辑，明确指出arr本身可迭代，但调用迭代器next拿到的第一个值不支持迭代，无法用于[a,b]的数组解构。

通用排查方案 #

1. 先打印arr的完整结构，确认是否为预期的可迭代结构，优先校验是否为二维数组
2. 手动执行迭代逻辑定位问题：打印arr[Symbol.iterator]().next().value的类型，确认单个迭代项是否支持迭代
3. 增加前置校验逻辑，避免非预期结构进入循环：

let arr = await fetch(...).then(r => r.json());
// 前置校验示例，可适配业务预期结构调整
if (!Array.isArray(arr) || !arr.every(item => Array.isArray(item) && item.length >=2)) {
  console.error('返回结构不符合要求', arr);
  // 自定义异常处理逻辑
  return;
}
for(let [a, b] of arr) {
  console.log(a, b);
}

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