疯狂的技术宅

以前出于工作目的,编写和翻译了大量的技术文章,以前端为主,删掉了过时的、毫无营养的内容,留下的都是精华。


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于本站

  • 回到主站

  • 搜索

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

时间: 2019-08-23 分类: 前端技术   字数: 649 字 阅读: 2分钟
标签: #性能# #JavaScript#
  • 本文译自:https://codeburst.io/javascript-performance-test-for-vs-for-each-vs-map-reduce-filter-find-32c1113f19d7
  • 译者:疯狂的技术宅

img

我们都知道 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 很慢的原因有许多,其中有

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

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

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

  1. 代码可读性和可维护性
  2. 轻松编码
  3. 快速编码
  4. 实施和优化
  5. 个人选择

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

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

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

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

标签: #性能# #JavaScript#

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

链接:https://fe-tech.viewnode.com/post/201908/23/

作者:疯狂的技术宅

声明: 本博客文章除特别声明外,均采用 CC BY-NC-ND 4.0 国际许可协议( 知识共享署名-非商业性使用-禁止演绎 4.0),转载请注明出处!

用 NodeJS 重命名系统文件
为什么我喜欢 JavaScript Optional Chaining
  • 文章目录
  • 站点概览
疯狂的技术宅

疯狂的技术宅

退休程序员,硬件发烧友,人工智能爱好者。写写代码喝喝茶,晒晒太阳带带娃。

457 日志
8 分类
583 标签
GitHub
友情链接
  • viewnode
  • mofish
标签云
  • Javascript 172
  • Node.Js 62
  • Vue 36
  • Typescript 28
  • 实战项目 28
  • 面试 21
  • React 20
  • Css 17
  • 面试题 16
  • 教程 13
  • Promise 12
  • Chrome 9
  • Debug 9
  • 调试 9
  • 资源 9
  • Deno 8
  • Dom 8
  • 杂谈 8
  • 正则表达式 8
  • 测试 8
  • 所有结果清楚地表明 for 循环比 map/reduce/filter/find 更加高效。
© 2018 - 2022 疯狂的技术宅 All Rights Reserved
Powered by - Hugo v0.99.0 / Theme by - NexT
Storage by 俺的服务器 / 冀ICP备2022010157号
0%