将 for 循环转换为 ES6 for of 循环

Question

我想将这段代码转换为 ES-6。所以我使用的第一个例子中的for循环需要是for循环。在第二个版本中发生的情况是，百分比计算的工作方式与我在控制台中看到的一样，但它没有显示在 UI 中。较旧的第一种方法效果很好。怎么会？

// 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 = '---';
  }

 });
},

Answer 1

由于您的 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 相当新，可能需要 polyfilling。）

但是：与仅使用 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 = '---';
    }
  }
}

...或者就此而言，现在使用 NodeList 上的 forEach（同样，您可以）：

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

将 for 循环转换为 ES6 for of 循环

Convert for loop to ES6 for of loop

javascript

loops

callback

nodelist

ecmascript-6