В этом для / для l oop, что эквивалентно традиционному IE11 для l oop?

Question

Я пытаюсь сделать приведенный ниже код совместимым с IE11, но я застрял в строке for / of l oop (строка 10).

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

Я считаю, что mutationsList является iterable nodeList (но я могу ошибаться). В связи с этим, как я могу перевести for(let mutation of mutationsList) { в традиционный для l oop? Не могли бы вы также перевести for(let mutation of mutationsList) { в более простые термины для меня, как человека, который понимает только основы c JavaScript?

Answer 1

Традиционно для l oop:

for(var i=0; i<mutationsList.length; i++) {
    var mutation = mutationsList[i];
    if (mutation.type === 'childList') {
        console.log('A child node has been added or removed.');
    }
    else if (mutation.type === 'attributes') {
        console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
}

for ... of - это тип оператора for для циклического перебора итераций (mutationsList [index]) до тех пор, пока он не достигнет конца строки.

Answer 2

для ... оператора не поддерживает IE браузер, поэтому вы можете использовать для ... в операторе или для оператора для Через список oop они поддерживают браузер IE.

Попробуйте изменить код, как показано ниже:

for(let mutation in mutationsList) {
    if (mutation.type === 'childList') {
        console.log('A child node has been added or removed.');
    }
    else if (mutation.type === 'attributes') {
        console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
}

Answer 3

Циклы

for...of перечисляют итератор, присутствующий в Symbol.iterator, используя итерационный протокол . Это означает, что поведение итератора будет полностью обойдено традиционным для l oop. Тем не менее, во многих случаях вы имеете дело с массивом или подобным массиву объектом, который может быть перечислен с использованием целочисленных индексов.

Для этих простых случаев они переводят примерно , например, :

for(let x of [1,2,3]) {
  console.log(x)
}

примерно эквивалентно:

for (var _i = 0, _arr = [1, 2, 3]; _i < _arr.length; _i++) {
  var x = _arr[_i];
  console.log(x);
}

В вашем коде for...of используется для перечисления массива MutationRecord объектов, переданных обратному вызову MutationObserver. for...of работает с массивами, потому что Array имеет Symbol.iterator в своем прототипе. Обычный старый для l oop также будет работать, потому что массивы имеют элементы с ключами, которые соответствуют целым числам, к которым можно обратиться, используя обозначение в скобках (например, arr[0]).

Answer 4

Это ES6, а вы хотите ES5:

 for(let mutation of mutationsList) {

переводит

for(var mutation = 0; mutation < mutationsList.length; mutation++){
   var something = mutationsList[mutation] ; // access the element
}