Конвертировать для цикла в ES6 для цикла - PullRequest
Новая
       26

Конвертировать для цикла в ES6 для цикла

0 голосов
/ 21 октября 2019

Я хотел бы преобразовать этот кусок кода в ES-6. Так что цикл for в первом примере, который я использовал, должен быть циклом for. То, что происходит во второй версии, это вычисление процентов работает так же, как и ожидалось, как я вижу в консоли, но это не отображается в пользовательском интерфейсе. Более старый, первый метод работает нормально. Как придешь? 

// This one works fine
displayPercentages: function(percentages) {

          var fields = 
document.querySelectorAll(DOMstrings.expensesPercLabel);

          var nodeListForEach = function(list, callback) {   
            for(var i = 0; i < list.length ; i++) {
                console.log(list[i], i)
                callback(list[i], i)          
            }
        }; 

             nodeListForEach(fields, function(el, index){
              if(percentages[index] > 0){
                 el.textContent = percentages[index] + '%'
             }else{
                el.textContent = '---';
             }

          });
      },


 // Second version has a problem showing percentages in the UI

  displayPercentages: function(percentages) {       

  var fields = document.querySelectorAll(DOMstrings.expensesPercLabel);

  var nodeListForEach = function(list, callback) {
  for(let [el, index] of list.entries()) {
      console.log(el, index)
      callback(el, index)
    }
 }; 

 nodeListForEach(fields, function(el, index){
  if(percentages[index] > 0){
      el.textContent = percentages[index] + '%'
  }else{
      el.textContent = '---';
  }

 });
},

1 Ответ

1 голос
/ 21 октября 2019

Поскольку тело вашего цикла for использует индекс, вам, вероятно, лучше придерживаться цикла for, а не переключаться на for-of.

Вы можете переключатьсяна for-of (в браузерах, в которых реализовано выполнение итераций NodeList, или , если вы заполнили его , или с помощью Array.from), распространив NodeList в массив (или используя Array.from для создания массива), а затем с помощью Array.prototype.entries, который дает итератор, в котором каждое повторяемое значение представляет собой массив [index, value]: 

displayPercentages: function(percentages) {
  var fields = document.querySelectorAll(DOMstrings.expensesPercLabel);
  for (const [index, el] of [...fields].entries()) {
    if (percentages[index] > 0) {
      el.textContent = percentages[index] + '%'
    } else {
      el.textContent = '---';
    }
  }
}

(обратите внимание, что Array.prototype.entries является довольно новым и может потребовать многократного заполнения.)

Но : Это действительно довольно косвенно по сравнению с просто использованием цикла for: 

displayPercentages: function(percentages) {
  var fields = document.querySelectorAll(DOMstrings.expensesPercLabel);
  for (let index = 0; index < fields.length; ++index) {
    const el = fields[index];
    if (percentages[index] > 0) {
      el.textContent = percentages[index] + '%'
    } else {
      el.textContent = '---';
    }
  }
}

... или в этом отношении, используя forEach, который сейчас включен NodeList (который, опять же, вы можете polyfill ): 

displayPercentages: function(percentages) {
  document.querySelectorAll(DOMstrings.expensesPercLabel).forEach((el, index) => {
    if (percentages[index] > 0) {
      el.textContent = percentages[index] + '%'
    } else {
      el.textContent = '---';
    }
  });
}
...