专栏首页code秘密花园JavaScript 中哪一种循环最快呢?

JavaScript 中哪一种循环最快呢?

究竟哪一种循环更快?

答案其实是:for(倒序)

最让我感到惊讶的事情是,当我在本地计算机上进行测试之后,我不得不接受 for(倒序)是所有 for 循环中最快的这一事实。下面我会举个对一个包含超过一百万项元素的数组执行一次循环遍历的例子。

声明:console.time() 结果的准确度在很大程度上取决于我们运行测试的系统配置。你可以在此处对准确度作进一步了解。

const million = 1000000; 
const arr = Array(million);
console.time('⏳');
for (let i = arr.length; i > 0; i--) {} // for(倒序)  :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for          :- 1.6ms
arr.forEach(v => v)                     // foreach      :- 2.1ms
for (const v of arr) {}                 // for...of     :- 11.7ms
console.timeEnd('⏳');

造成这样结果的原因很简单,在代码中,正序和倒序的 for 循环几乎花费一样的时间,仅仅相差了 0.1 毫秒。原因是,for(倒序)只需要计算一次起始变量 let i = arr.length,而在正序的 for 循环中,它在每次变量增加后都会检查条件 i<arr.length。这个细微的差别不是很重要,你可以忽略它。

而 forEach 是 Array 原型的一个方法,与普通的 for 循环相比,forEach 和 for…of 需要花费更多的时间进行数组迭代。(译者注:但值得注意的是,for…of 和 forEach 都从对象中获取了数据,而原型并没有,因此没有可比性。)

循环的类型,以及我们应该在何处使用它们

1. For 循环(正序和倒序)

我想,也许大家都应该对这个基础循环非常熟悉了。我们可以在任何我们需要的地方使用 for 循环,按照核定的次数运行一段代码。最基础的 for 循环运行最迅速的,那我们每一次都应该使用它,对吗?并不然,性能不仅仅只是唯一尺度,代码可读性往往更加重要,就让我们选择适合我们应用程序的变形即可。

2. forEach

这个方法需要接受一个回调函数作为输入参数,遍历数组的每一个元素,并执行我们的回调函数(以元素本身和它的索引(可选参数)作为参数赋予给回调函数)。forEach 还允许在回调函数中使用一个可选参数 this。

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 
/* 输出  
have - 0
fun - 1
coding - 2 
*/

3. for…of

for…of 是在 ES6(ECMAScript 6)中实现标准化的。它会对一个可迭代的对象(例如 array、map、set、string 等)创建一个循环,并且有一个突出的优点,即优秀的可读性。

const arr = [3, 5, 7];
const str = 'hello';
for (let i of arr) {
   console.log(i); // 输出 3, 5, 7
}
for (let i of str) {
   console.log(i); // 输出 'h', 'e', 'l', 'l', 'o'
}

需要注意的是,请不要在生成器中使用 for……of,即便 for……of 循环提前终止。在退出循环后,生成器被关闭,并尝试再次迭代,不会产生任何进一步的结果。

4. for in

for…in 会在对象的所有可枚举属性上迭代指定的变量。对于每个不同的属性,for…in 语句除返回数字索引外,还将返回用户定义的属性的名称。因此,在遍历数组时最好使用带有数字索引的传统 for 循环。因为 for…in 语句还会迭代除数组元素之外的用户定义属性,就算我们修改了数组对象(例如添加自定义属性或方法),依然如此。

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
    fullName += details[i] + ' '; // fullName: john doe
}

for…of 和 for…in

for…of 和 for…in 之间的主要区别是它们迭代的内容。for…in 循环遍历对象的属性,而 for…of 循环遍历可迭代对象的值。

let arr= [4, 5, 6];
for (let i in arr) {
   console.log(i); // '0', '1', '2'
}
for (let i of arr) {
   console.log(i); // '4', '5', '6'
}

结论

for 最快,但可读性比较差

foreach 比较快,能够控制内容

for...of 比较慢,但香

for...in 比较慢,没那么方便

————————————————

感谢点赞支持下哈

本文分享自微信公众号 - code秘密花园(code_mmhy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 中哪一种循环最快呢?

    最让我感到惊讶的事情是,当我在本地计算机上进行测试之后,我不得不接受 for(倒序)是所有 for 循环中最快的这一事实。下面我会举个对一个包含超过一百万项元素...

    coder_koala
  • 【JS】974- JavaScript 中哪一种循环最快呢?

    了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误。

    pingan8787
  • 回到基础:优化 JavaScript 的循环[每日前端夜话0x52]

    翻译:疯狂的技术宅 原文:https://medium.freecodecamp.org/how-to-optimize-your-javascript-app...

    疯狂的技术宅
  • 前端性能优化之 JavaScript

    本文为 《JavaScript》 读书笔记,是利用中午休息时间、下班时间以及周末整理出来的,此书虽有点老旧,但谈论的性能优化话题是每位同学必须理解和掌握的,业务...

    Jack Chen
  • JS是单线程,你了解其运行机制吗?

    如果是windows电脑中,可以打开任务管理器,可以看到有一个后台进程列表。对,那里就是查看进程的地方,而且可以看到每个进程的内存资源信息以及cpu占有率。

    夜尽天明
  • JavaScript运行机制

    这一题看似很简单,但如果你不了解JavaScript运行机制,很容易就答错了。题目的答案是依次输出1 2 3,如果你有疑惑,下文有详细解释。

    一觉睡到小时候
  • 为什么Python这么慢?

    答案在很大程度上取决于您正在运行的应用程序的类型。没有一个基准测试是完美的,但是计算机语言基准测试游戏是一个很好的起点。

    HuangWeiAI
  • 对5种主流编程语言的吐槽

    不可否认,想要成为一名优秀的程序员确实是需要掌握多种编程语言。通过这几年的自虐式学习,小编也慢慢的掌握了这些编程语言。接下来要为大家,介绍五款让人又爱又恨的编程...

    企鹅号小编
  • 对5种主流编程语言的吐槽

    接下来要为大家,介绍五款让我又爱又恨的编程语言! 不可否认,想要成为一名优秀的程序员确实是需要掌握多种编程语言。通过这几年的自虐式学习,我也慢慢的掌握了这些编程...

    小莹莹

扫码关注云+社区

领取腾讯云代金券