使用Babel编译后ES6 for of语句仍报错问题咨询

问题根源 #

你遇到的问题核心在于：document.getElementsByClassName()返回的是**HTMLCollection类型的集合**，而旧版本的Safari（具体是Safari 10及更早版本）并没有为HTMLCollection实现ES6的可迭代（iterable）接口。

Babel只是转译了for...of的语法（把它转换成基于迭代器的代码，也就是你看到的_iteratorNormalCompletion3这类变量），但它没法凭空让不支持迭代的HTMLCollection变成可迭代对象——这属于浏览器环境API的缺失，不是语法转译能解决的。

解决方案 #

下面提供几种可靠的解决办法：

1. 将HTMLCollection转换为数组

把集合转换成真正的数组，数组天生支持可迭代，这样for...of就能正常工作了：

// 方法A：使用Array.from()
for(const form of Array.from(doc.getElementsByClassName('class-name'))) {
  // 你的业务逻辑
}

// 方法B：使用扩展运算符
for(const form of [...doc.getElementsByClassName('class-name')]) {
  // 你的业务逻辑
}

注意：如果你的目标环境（旧Safari）不支持Array.from或扩展运算符，确保Babel已经配置了core-js这类polyfill来补全这些API。

2. 使用传统的for循环遍历索引

如果不想依赖数组转换或polyfill，直接用最兼容的索引遍历方式：

const forms = doc.getElementsByClassName('class-name');
for(let i = 0; i < forms.length; i++) {
  const form = forms[i];
  // 你的业务逻辑
}

这种方式在所有浏览器中都能稳定运行，没有兼容性问题。

3. 手动为HTMLCollection添加迭代支持（进阶）

如果你需要在多个地方遍历这类集合，可以手动给HTMLCollection原型添加迭代器，一次性解决所有类似问题：

if (typeof HTMLCollection !== 'undefined' && !HTMLCollection.prototype[Symbol.iterator]) {
  HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
}

这样之后，所有HTMLCollection都能直接用for...of遍历了，不过这种方式需要确保Symbol.iterator在目标环境中可用（同样可以通过polyfill补全）。

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