JavaScript - For loop vs forEach

Posted 2021-05-05

有人可以解释这两段代码如何实现完全相同的事情*或解释为什么它们可能会出现但却没有？

  for (i = 0; i < xx.length; i++) {
    xx[i].classList.remove(...y);
  }

  xx.forEach(x => {
    x.classList.remove(...y);
  });

答案

forEach是Array原型的一种方法。它遍历数组的每个元素并将其传递给回调函数。

所以基本上，forEach是用例“将array的每个元素传递给function”的简写方法。这是一个常见的例子，我认为与Array.forEach循环相比，for非常有用：

// shortcut for document.querySelectorAll
function $$(expr, con) {
    return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}

// hide an element
function hide(el) {
    el.style.display = 'none';
}

// hide all divs via forEach
$$('div').forEach(hide); 

// hide all divs via for
for (var divs = $$('div'), i = 0; i < divs.length; i++) {
    hide(divs[i])
}

如您所见，与for循环相比，forEach语句的可读性得到了改进。

另一方面，for语句更灵活：它不一定涉及数组。正常for循环的性能略好一些，因为没有涉及每个元素的函数调用。尽管如此，当它可以写成for语句时，建议避免使用forEach循环。

另一答案

小心，如果你声明“i”没有“var”关键字，它将是全局的。

你可以在这里查看forEach可以做什么：forEach MDN