详解JavaScript中哪一种循环最快呢

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

JavaScript 是 Web 开发领域的“常青树”。无论是 JavaScript 框架(如 Node.js、React、Angular、Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础。我们来谈谈现代 JavaScript 吧。循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代或循环值的方法。
但问题在于,我们是否真的知道哪种循环或迭代最适合我们的需求。for 循环有很多变形,例如 for、for(倒序)、for…of、forEach、for…in、for…await。本文将围绕这些展开讨论。

究竟哪一种循环更快?

答案其实是: for(倒序)

最让我感到惊讶的事情是,当我在本地计算机上进行测试之后,我不得不接受 for(倒序)是所有 for 循环中最快的这一事实。下面我会举个对一个包含超过一百万项元素的数组执行一次循环遍历的例子。
声明:console.time() 结果的准确度在很大程度上取决于我们运行测试的系统配置。你可以在此处对准确度作进一步了解。

const million = 1000000;
const arr = Array(million);

// 注:这是稀疏数组,应该为其指定内容,否则不同方式的循环对其的处理方式会不同:
// 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 */

需要注意的是,如果我们要使用 forEach,我们不能使用 JavaScript 的短路运算符,即不能在每一次循环中跳过或结束循环。

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 比较慢,没那么方便

最后,给你一条明智的建议 —— 优先考虑可读性。尤其是当我们开发复杂的结构程序时,更需要这样做。当然,我们也应该专注于性能。尽量避免增添不必要的、多余的花哨代码,因为这有时可能对你的程序性能造成严重影响。祝你编码愉快。

译者注

在译者的实际测试中,发现:

  • 不同浏览器甚至不同版本,结果会有不一样(颠倒,例如 Firefox 对原生 for-loop 似乎不太友好,Safari 极度喜欢 while)
  • 不同平台操作系统处理器,结果会有不一样

到此这篇关于详解JavaScript中哪一种循环最快呢的文章就介绍到这了,更多相关JavaScript哪一种循环最内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

原文地址:Which type of loop is fastest in JavaScript?
原文作者:kushsavani

(0)

相关推荐

  • js for终止循环 跳出多层循环

    今天我们小编写带代码的时候遇到一段代码,需要终止运行for,通过遍历json数据实现判断 <script> var Tid="55555"; var jb51cp = [ {id:66666,Cpurl:"https://baidu.com"}, {id:55555,Cpurl:"https://www.jb51.net"} ]; for(var i = 0; i < jb51cp.length; i++){ if(jb51cp

  • javaScript如何跳出多重循环break、continue

    先来说说break和continue之间的区别 摘自JavaScript高级程序设计 for(var i=0;i<10;i++){ if(i>5){ break; } } console.log(i); ---6 •当i=5和10的时候,会执行到break,并退出循环 for(var i=1;i<10;i++){ if(i>5){ continue; } num++; } console.log(num); ---4 var num=0; for(var i=1;i<10;i

  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时 复制代码 代码如下: <scr

  • 浅谈vue.js中v-for循环渲染

    这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="

  • js 数组的for循环到底应该怎么写?

    然后来看看今天我开始怀疑哪个权威哦家伙了... 自从开始学编程,自从接触到数组这个东西,我就一直在不同的地点和不同的时间不断看到有人提醒:在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i<n;i++)的方式哦,而不要用for(var i=0;i>arr.length;i++)的方式哦,因为用脑子想想也知道,第二种方法的第二部分会一直去计算数组的length,所以自然效率比较低. 哦?我们这里不说其他程序语言,而只讨论js,因为不同的语言,实现可能不同,其

  • JavaScript跳出循环的三种方法(break, return, continue)

    前言: 一位前端界的大神让我去思考的一个问题, 给了Big-man一段代码,如下: function Seriously(options) { // if called without 'new', make a new object and return that if(window === this || !(this instanceof Seriously) || this.id !== undefined) { return new Seriously(options); } } re

  • JS数组的遍历方式for循环与for...in

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

  • JavaScript中for循环的几种写法与效率总结

    前言 对于for循环,相信大家再常用不过了.但是这回说下for循环是因为看代码时我居然没有看明白一个for循环的意思,真是不应该啊. 这个for循环是这么写的: for (var i = 0, rule; rule = rules[i++];) { //do something } 这个写法是什么意思呢?后面再说,现卖个关子,这个写法我感觉还是挺好的. for循环写法对效率的影响 说上面那段代码之前,先说一下for循环的效率问题.在接触js时关于for循环的写法和对效率影响的文章挺不少的.但总的

  • JavaScript中循环遍历Array与Map的方法小结

    js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

随机推荐