ES6 для ошибки оператора даже при компиляции с помощью babel

У меня возникли проблемы с выяснением того, что не так с этим утверждением.

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

Глядя на списки совместимости для этого, я могу понять, почему у него возникают проблемы с запуском в обычном ES6 на сафари, если у него нет поддержки. Однако это происходит до тех пор, пока я не компилирую ES6 с помощью babel.

При компиляции получаю следующее:

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;
            }
        }
    }

Но это вызывает ошибку в сафари

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, скомпилированная с помощью gulp через browserify и babelify для всех последних версий. Если я установлю плагин 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;
    }

Но это дает мне еще одну ошибку сафари:

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

Установлена ​​ли ваша переменная doc с document?

Dario 01.05.2018 11:51
npmjs.com/package/iterators-polyfill
Jonas Wilms 01.05.2018 11:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
232
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы перебирать NodeList, у NodeList должно быть свойство Symbol.iterator, но babel не выполняет полифиллинг DOM, только JS.

Я бы рекомендовал не использовать for of вообще или использовать полифил HTML5 DOM в дополнение к babel, чтобы он работал.

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

Я удивлен, что Safari по-прежнему не поддерживает это, простой и понятный способ циклического зацикливания классов - практически единственная причина, по которой я хотел бы использовать jQuery. Что было бы лучшей альтернативой for of в этой ситуации?

Chris Morris 01.05.2018 12:08

@chris просто добавьте полифилл. NodeList[Symbol.iterator] = [][Symbol.iterator]; и все работает.

Jonas Wilms 01.05.2018 12:11

Я получил это, работая с babel-polyfill, а затем с гораздо меньшим и более гибким полифилом corejs. Теперь я жду следующего выпуска, который появится из ниоткуда.

Chris Morris 01.05.2018 16:41

Другие вопросы по теме