时间戳

首页 > 解决方案 > 即使使用 babel 编译，ES6 for of 语句也会出错

javascript - 即使使用 babel 编译，ES6 for of 语句也会出错

问题描述

我在弄清楚这个陈述有什么问题时遇到了一些问题。

for(const form of doc.getElementsByClassName('class-name')) { .... }

查看此兼容性列表，我可以看到为什么它在 safari 上运行纯 ES6 时遇到问题，因为它没有支持。然而，直到我用 babel 编译 ES6 时才会发生这种情况。

编译后我得到以下信息：

var _iteratorNormalCompletion3 = true;
    var _didIteratorError3 = false;
    var _iteratorError3 = undefined;

    try {
        for (var _iterator3 = doc.getElementsByClassName('class-name')[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
            var form = _step3.value;
        }
    } catch (err) {
        _didIteratorError3 = true;
        _iteratorError3 = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion3 && _iterator3.return) {
                _iterator3.return();
            }
        } finally {
            if (_didIteratorError3) {
                throw _iteratorError3;
            }
        }
    }

但这会触发 safari 中的错误

TypeError: doc.getElementsByClassName('class-name')[Symbol.iterator] is not a function. (In 'doc.getElementsByClassName('class-name')[Symbol.iterator]()', 'doc.getElementsByClassName('class-name')[Symbol.iterator]' is undefined)

这是使用最新版本的 Babel，通过 browserify 和 babelify 使用 gulp 编译所有最新版本。如果我安装transform-es2015-for-of插件并强制它，我会得到以下结果：

var _loop = function _loop() { };

    for (var _iterator2 = doc.getElementsByClassName('class-name'), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
        var _ref2;

        var _ret = _loop();

        if (_ret === 'break') break;
    }

但这给了我另一个 Safari 错误：

TypeError: _iterator2[Symbol.iterator] is not a function. (In '_iterator2[Symbol.iterator]()', '_iterator2[Symbol.iterator]' is undefined)

标签： javascriptecmascript-6babeljs

解决方案

要遍历 NodeList ， NodeList 需要有一个Symbol.iterator属性，但 babel 不会 polyfill DOM，只有 JS。

我建议不要for of完全使用，或者除了 babel 之外还使用 HTML5 DOM polyfill 来使其工作。

https://github.com/babel/babel/issues/545

推荐阅读