Javascript 性能测试 - for vs for each vs (map, reduce, filter, find)

2019-08-27 2,222 阅读2分钟

翻译：疯狂的技术宅

原文：codeburst.io/javascript-…

我们都知道 for 循环比 each 或 javascript 函数更快，因为在javascript函数的引擎下可能会使用for循环或其他我不确定的东西。我使用一个对象数组进行了一个简单的测试，并通过loop/for each/javascript 函数执行一些操作，并观察执行所需的时间。

这些结果来自小例子，可能根据执行的操作和执行环境的选择而有所不同。还与 VM 的选择有关。

1. Reduce vs for循环 vs foreach

// calculated the sum of upVotes
const posts = [ 
  {id: 1, upVotes: 2},
  {id: 2, upVotes: 18}, 
  {id: 3, upVotes: 1}, 
  {id: 4, upVotes: 30}, 
  {id: 5, upVotes: 50} 
];let sum = 0;
console.time('reduce');
sum = posts.reduce((s, p)=> s+=p.upVotes,0);
console.timeEnd('reduce')sum = 0;
console.time('for loop');
for(let i=0; i<posts.length; i++) {
    sum += posts[i].upVotes;
}
console.timeEnd('for loop');sum = 0;
console.time('for each');
posts.forEach(element => {
    sum += element.upVotes;
});console.timeEnd('for each');

注意：下面是结果列表，代码可以在这里找到。

所有结果清楚地表明 for 循环比 map/reduce/filter/find 更加高效。

Map/Reduce/Filter/Find 很慢的原因有许多，其中有

他们有一个回调，会产生开销。
javascript 函数需要考虑很多极端情况，比如 getter、稀疏数组和检查传递的参数是否是数组，这会增加开销。

我找到了一个库。重新实现几个常见的内置原生 JavaScript 函数。

但是使用的原则不仅仅取决于性能，还有更多因素需要考虑，其中一些是：

代码可读性和可维护性
轻松编码
快速编码
实施和优化
个人选择

就个人而言，我喜欢 map、reduce、filter 和 find，并且我也使用过很长一段时间。他们帮助我写出干净、精确、快速并符合我思路的点代码。当我别无选择时，会使用 for 循环。

就优化而言，map/reduce/filter/find 替换应该是最后的选择，或者根本就不是一个选项，其具体取决于你所需的优化级别。

注意：如果你正在使用循环，请始终用惯用方式使用，因为编译器现在能够以正确的方式去优化惯用循环

更新：你可以在这里找到大数据集和复杂计算的结果。

欢迎关注前端公众号：前端先锋，领取前端工程化实用工具包。

友情链接：