javascript - angular.foreach 和原生 for 循环之间的性能差异

Question

我在我的应用程序中使用 native for 循环(下面的第三个循环语句)，我读到的一些 native for 循环比 angular.forEach 具有更好的性能，但我没有找到正确的解释。如果有人有更好的解释请分享。

1) Angular .forEach

和 2)

for (var i = Things.length - 1; i >= 0; i--){
  Things[i]
};

和 3)

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

谢谢

Answer 1

使用 forEach 及相关

如果您使用的环境支持 ES5 的数组功能(直接或使用填充程序)，则可以使用新的 forEach(规范 | MDN):

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach 接受一个迭代器函数，并且可以选择接受一个在调用该迭代器函数时用作 this 的值(上面未使用)。按顺序为数组中的每个条目调用迭代器函数，跳过稀疏数组中不存在的条目。虽然我上面只使用了一个参数，但迭代器函数是用三个参数调用的:每个条目的值、该条目的索引以及对您正在迭代的数组的引用(如果您的函数还没有它)方便)。

在通用网页上使用 forEach 仍然(截至 2014 年 3 月)需要为本身不支持它的浏览器添加一个“垫片”，因为 IE8 及更早版本没有它(并且全局浏览器用户中有 7% 到 21% 使用它们，具体取决于您相信的人；该数字因中国的使用率明显高于其他地方而略有偏差，请务必检查您自己的统计数据，看看您需要什么支持)。但是填充/填充它很容易完成(搜索“es5 shim”以获得多个选项)。

forEach 的优点是您不必在包含范围内声明索引和值变量，因为它们作为迭代函数的参数提供，并且很好地限定了该迭代的范围。

如果您担心为每个数组条目进行函数调用的运行时成本，请不要担心；详细信息。

此外，forEach 是“循环遍历所有”函数，但 ES5 定义了其他几个有用的“通过数组进行操作并执行操作”函数，包括:

every(迭代器第一次返回 false 或 false 时停止循环) some(迭代器第一次返回 true 或真实值时停止循环) filter(创建一个新数组，其中包含过滤函数返回 true 的元素并忽略返回 false 的元素) map(根据迭代器函数返回的值创建一个新数组) reduce(通过重复调用迭代器并传入先前的值来构建一个值；有关详细信息，请参阅规范；对于对数组的内容求和以及许多其他内容很有用) reduceRight(与reduce类似，但按降序而不是升序工作)

使用简单的 for 循环

有时旧的方法是最好的:

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

如果数组的长度在循环期间不会改变，并且它是在性能敏感的代码中(不太可能)，则预先获取长度的稍微复杂的版本可能会快一点:

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

和/或倒数:

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

但是对于现代 JavaScript 引擎，您很少需要竭尽全力。

.forEach cannot be broken efficiently. You have to throw an exception to perform the break

所以原生循环比.each循环更好