JavaScript 是 Web 开发领域的“常青树”。无论是 JavaScript 框架(如 Node.js、React、Angular、Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础。我们来谈谈现代 JavaScript 吧。循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代或循环值的方法。
但问题在于,我们是否真的知道哪种循环或迭代最适合我们的需求。for
循环有很多变形,例如 for
、for
(倒序)、for…of
、forEach
、for…in
、for…await
。本文将围绕这些展开讨论。
了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误。
究竟哪一种循环更快?
答案其实是: 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
需要花费