javascript - JavaScript 中 forEach 和 for 循环的区别

Question

我想知道:JavaScript 中的 forEach 和 for 循环之间是否有任何显着差异。

考虑这个例子:

var myArray = [1,2,3,4];

myArray.forEach(function(value) {
  console.log(value);
});

for (var i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

这是我的研究的一部分:

1. 性能:根据JsPerf : forEach 比 for 循环慢一点。
2. 可用性:在 forEach 循环的情况下，我们无法从回调中中断/返回。

例如:您想知道一个数是否是素数。我认为使用 for 循环比使用 forEach 循环更容易做到这一点。

可读性:使用 for 循环使代码比在代码中使用 forEach 更具可读性。

浏览器兼容性:IE < 9 不支持 forEach，因此我们的代码中引入了一些填充程序。

我的问题是:

1. 与 for 循环相比，forEach 有哪些优点？
2. 什么场景下更适合使用 forEach。
3. 为什么它会出现在 JavaScript 中？为什么需要它？

Answer 1

forEach是 Array 上的一个方法原型(prototype)。它迭代数组的每个元素并将其传递给回调函数。

基本上，forEach是用例“将数组的每个元素传递给函数”的简写方法。这是一个常见的例子，我认为 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 循环的性能稍好一些，因为没有对涉及的每个元素进行函数调用。尽管如此，当可以将其编写为 forEach 语句时，建议避免使用 for 循环。