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

每日前端夜话0x52

每日前端夜话，陪你聊前端。

每天晚上18:00准时推送。

正文共：1338 字

预计阅读时间： 5 分钟

翻译：疯狂的技术宅 原文：https://medium.freecodecamp.org/how-to-optimize-your-javascript-apps-using-loops-d5eade9ba89f

Photo by Zachary Young on Unsplash

对于提高 JavaScript 程序的性能这个问题，最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。

我们将看到 JavaScript 中主要的循环类型，以及如何针对它们进行高效编码。

现在开始！

循环性能

谈到循环性能，争论的焦点始终会集中到关于应该使用哪种循环，哪个是速度最快、性能最好的？事实上，在 JavaScript 提供的四种循环类型中，只有一种比其他循环慢得多 ——  for-in 循环。 对循环类型的选择应基于你的需求而不是性能问题。

有两个主要因素有助于改善循环性能 —— 每次迭代完成的工作和迭代次数。

在下面的内容中，我们将会看到通过对这两点的优化，可以对循环的整体性能产生积极的影响。

For 循环

在 ECMA-262（定义JavaScript的基本语法和行为的规范）第三版中，定义了四种循环类型。第一个是标准的 for 循环，它与其他类 C 语言的语法相同：

1for (var i = 0; i < 10; i++){
2    //循环体
3}

这可能是最常用的 JavaScript 循环结构。要了解应该怎样对其进行优化，需要先进行一些分析。

解析

for 循环由四部分组成：初始化，预测试条件，循环体和后执行。它的工作方式如下：首先，执行初始化代码（var i = 0;）。然后是预测试条件（i <10;）。如果预测试条件的计算结果为 true，则执行循环体。之后运行后执行代码（i ++）。

优化

要优化循环中的工作量，第一步是最小化对象成员和数组项查找的数量。

还可以通过反转顺序来提高循环的性能。在 JavaScript 中，反转循环对循环的性能提升不大，除非你消除了额外的操作。

 1// 原始循环
 2for (var i = 0; i < items.length; i++){
 3    process(items[i]);
 4}
 5// 最小化属性查找
 6for (var i = 0, len = items.length; i < len; i++){
 7    process(items[i]);
 8}
 9// 最小化属性查找并反序
10for (var i = items.length; i--; ){
11    process(items[i]);
12}

While 循环

第二种是 while 循环。下面是一个简单的预测试循环，由预测试条件和循环体组成。

1var i = 0;
2while(i < 10){
3    //循环体
4    i++;
5}

解析

如果预测试条件的计算结果为 true，则执行循环体。如果不是 —— 它就会被跳过。每个 while 循环都可以用 for 替换，反之亦然。

优化

 1// 原始循环
 2var j = 0;
 3while (j < items.length){
 4    process(items[j++]);
 5}
 6// 最小化属性查找
 7var j = 0,
 8    count = items.length;
 9while (j < count){
10    process(items[j++]);
11}
12// 最小化属性查找和反序
13var j = items.length;
14while (j--){
15    process(items[j]);
16}

Do-While 循环

do-while 是第三种循环，它是 JavaScript 中唯一的后测试循环。由循环体和后测试条件组成：

1var i = 0;
2do {
3    //循环体
4} while (i++ < 10);
5

解析

在这种类型的循环中，循环体总是至少执行一次。然后评估测试后的条件，如果它是true，则执行另一个循环周期。

优化

 1// 原始循环
 2var k = 0;
 3do {
 4    process(items[k++]);
 5} while (k < items.length);
 6// 最小化属性查找
 7var k = 0,
 8    num = items.length;
 9do {
10    process(items[k++]);
11} while (k < num);
12// 最小化属性查找和反序
13var k = items.length - 1;
14do {
15    process(items[k]);
16} while (k--);

For-In 循环

最后一种是 for-in 循环。它有一个非常特殊的用途 —— 枚举 JavaScript 对象的命名属性。 它的语法如下：

1for (var prop in object){
2    //loop body
3}

解析

它的名称与 for 循环类似。但是工作方式完全不同。而这种差异使它比另外三种循环慢得多，后者具有相同的性能特征，所以争论哪个循环最快是没有用的。

每次循环执行时，变量 prop 会得到 object 的一个属性。它将会不断执行，直到返回所有属性为止。这些是对象自身的以及通过其原型链继承的属性。

注意事项

永远不要用“ for-in ”来迭代数组成员。

这种循环的每次迭代都会在实例或原型上进行属性查找，这使得 for-in 循环比其它循环要慢得多。对于相同次数的迭代，可能会比其它循环慢七倍。

结论

• for ， while 和 do-while 循环都有类似的性能特征，因此没有哪种类型比其他的更快或更慢。
• 避免使用 for-in 循环，除非你需要对大量未知对象属性进行迭代。
• 提高循环性能的最佳方法是减少每次迭代完成的工作量并减少循环迭代次数。

? 希望这对你有用，感谢阅读！ ?

资源

《高性能 JavaScript》（https://www.amazon.com/High-Performance-JavaScript-Application-Interfaces/dp/059680279X）- Nicholas C. Zakas

求分享

如果你觉得这篇文章对你有帮助，请点击右下角的 “?好看” 并分享给小伙伴们↘️↘️↘️??

下面夹杂一些私货：也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新，这是我们第一次将全部课程列表对外开放。

愿你有个好前程，愿你月薪30K。我们是认真的 ！

在公众号内回复“体系”查看高清大图