前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >写出高效的Javascript循环语句

写出高效的Javascript循环语句

作者头像
前端修罗场
发布2022-07-29 07:56:59
7320
发布2022-07-29 07:56:59
举报
文章被收录于专栏:Web 技术

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

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

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

For

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

代码语言:javascript
复制
for (var i = 0; i < 10; i++){    //loop body}

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

优化

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

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

代码语言: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循环。这是一个简单的预测试循环,由一个预测试条件和一个循环主体组成。

代码语言:javascript
复制
var i = 0;
while(i < 10){
    //loop body
    i++;
}

优化

代码语言:javascript
复制
// 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中唯一的测试后循环。它由循环体和测试后条件组成:

代码语言:javascript
复制
var i = 0;
do {
    //loop body
} while (i++ < 10);

优化

代码语言:javascript
复制
// 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对象的命名属性。

代码语言:javascript
复制
for (var prop in object){
    //loop body
}

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

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

最后

总结一下:不应使用“ for-in”来遍历数组的成员。因为此循环的每次迭代都会在实例或原型上进行属性查找,这使得for-in循环比其他循环慢得多。对于相同数量的迭代,它可能比其余的慢七倍。

for,while和do-while循环都具有相似的性能特征,因此没有一种循环类型比其他循环类型显着更快或更慢。 除非需要遍历许多未知对象属性,否则请避免for-in循环。

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端修罗场 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • For
    • 优化
    • While
      • 优化
      • Do-While
        • 优化
        • For-In
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档