写一个高效的Javascript循环语句

简介: 写一个高效的Javascript循环语句

当涉及到循环性能时,争论始终是关于使用哪个循环。 哪个是最快,最高效的? 事实是,在JavaScript提供的四种循环类型中,只有一种比for-in循环要慢得多。 循环类型的选择应基于您的要求而不是性能方面的考虑。

影响循环性能的主要因素有两个:每次迭代完成的工作和迭代次数。

在下面的部分中,我们将看到通过减少它们如何对循环性能产生积极的总体影响。

For

这可能是最常用的JavaScript循环构造。 要了解如何优化其工作,我们需要对其进行剖析。

for (var i = 0; i < 10; i++){    //loop body}

for循环包括四个部分:初始化,预测试条件,循环主体和后执行。 它的工作方式如下:首先,执行初始化代码(var i = 0;)。 然后是预测试条件(i <10;)。 如果预测试条件评估为true,则执行循环主体。 之后,运行后执行代码(i ++)。

优化

优化循环工作量的第一步是最大程度地减少对象成员和数组项查找的数量。

您还可以通过颠倒顺序来提高循环的性能。 在JavaScript中,如果您消除了多余的操作,则反转循环的确会导致循环性能稍有改善。

// original loop
for (var i = 0; i < items.length; i++){
    process(items[i]);
}
// minimizing property lookups
for (var i = 0, len = items.length; i < len; i++){
    process(items[i]);
}
// minimizing property lookups and reversing
for (var i = items.length; i--; ){
    process(items[i]);
}

While

第二种循环是while循环。 这是一个简单的预测试循环,由一个预测试条件和一个循环主体组成。

var i = 0;
while(i < 10){
    //loop body
    i++;
}

优化

// original loop
var j = 0;
while (j < items.length){
    process(items[j++]);
}
// minimizing property lookups
var j = 0,
  count = items.length;
while (j < count){
    process(items[j++]);
}
// minimizing property lookups and reversing
var j = items.length;
while (j--){
    process(items[j]);
}

Do-While

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

var i = 0;
do {
    //loop body
} while (i++ < 10);

优化

// original loop
var k = 0;
do {
    process(items[k++]);
} while (k < items.length);
// minimizing property lookups
var k = 0,
    num = items.length;
do {
    process(items[k++]);
} while (k < num);
// minimizing property lookups and reversing
var k = items.length - 1;
do {
    process(items[k]);
} while (k--);

For-In

第四种和最后一种循环类型称为循环循环。 它有一个非常特殊的用途-枚举任何JavaScript对象的命名属性。

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

它的名称类似于常规的for循环。 它的工作方式完全不同。 而且,这种差异使它比其他三个循环都慢得多,其他三个循环具有相同的性能特征,因此无法尝试确定哪个循环最快。

每次执行循环时,变量prop都会在对象上具有另一个属性的名称,即字符串。 它将执行直到所有属性都返回。 这些将是对象本身的属性,以及通过其原型链继承的属性。

Tips

不应使用“ for-in”来遍历数组的成员。

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

结论

for,while和do-while循环都具有相似的性能特征,因此没有一种循环类型比其他循环类型显着更快或更慢。

除非需要遍历许多未知对象属性,否则请避免for-in循环

改善循环性能的最好方法是减少每次迭代完成的工作量并减少循环迭代的次数。


相关文章
|
2月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
37 6
JS循环for、for...of、for...in
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
48 2
JavaScript基础知识-流程控制之while循环
|
29天前
|
JavaScript 前端开发
js循环有几种
js循环有几种
29 0
|
3月前
|
JavaScript 前端开发
JavaScript中有哪几种循环?他们的运用场景在哪?
JavaScript中有哪几种循环?他们的运用场景在哪?
|
3月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
137 0
|
1天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
11 2
|
2月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
51 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
2月前
|
JavaScript 前端开发 索引
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
42 1
JavaScript基础知识-forEach循环
|
1月前
|
JavaScript
自动循环提交js
自动循环提交js
14 0