ホームページ > 記事 > ウェブフロントエンド > JavaScript での for ループの記述は実行効率にどのような影響を与えますか?
for ループの記述が効率に及ぼす影響
一般に、for ループを記述するには 2 つの方法があります:
変数を宣言せずに記述する: for(var i = 0;i<arr .length; i++){}
for(var i = 0;i<arr.length;i++){}
写声明变量的写法:for(var i = 0,len = arr.length;i < len;i++){}
除了for循环还有forEach()
,也有文章说forEach()
效率最高,推荐用forEach()
写法,那么到底哪个效率高呢?做个测试来看看吧。
测试方案
总的测试方案如下:
做一个容纳4千万的测试数组变量。
分别用两种写法的for循环和foreach对这个测试变量进行遍历。
在同一台稳定机器上,进行10次测试,最后取平均值。
测试环境:CPU:Inter(R) Core i5-3210M,RAM:12GM,system:win10(x64)
测试流程
制作测试变量
先用while循环做个测试变量出来,这个很简单,具体如下:
var testArrs = [], i = 0; while(i<40000000){ testArrs.push(i); i++; }
编写相应测试函数
测量和执行时间的代码,我用的是console.time()
和console.timeEnd()
来进行测试。
针对这个三个for循环,先做出三个函数出来,他们分别是
foreach循环测试:
function testForeach(testArrs){ console.time('foreach'); var newArrs = []; testArrs.forEach(function(i){ newArrs.push(i); }); console.timeEnd('foreach'); }
没有声明变量的for循环:
function testNoDeclare(testArrs){ console.time('no declare'); var newArrs = []; for(var i = 0;i<testArrs.length;i++){ newArrs.push(i); } console.timeEnd('no declare'); }
有变量声明的写法
function testUseDeclare(testArrs){ console.time('use declare'); var newArrs = []; for(var i = 0,len = testArrs.length;i<len;i++){ newArrs.push(i); } console.timeEnd('use declare'); }
执行测试函数
执行测试函数这里很简单啦,就是调用函数就可以了
testForeach(testArrs); testNoDeclare(testArrs); testUseDeclare(testArrs);
测试结果
经过10次测试,得到了以下结果
foreach | 不写声明 | 写声明 |
---|---|---|
2372.891ms | 672.530ms | 743.974ms |
2431.821ms | 710.275ms | 805.676ms |
2422.448ms | 729.287ms | 741.014ms |
2330.894ms | 730.200ms | 755.390ms |
2423.186ms | 703.255ms | 769.674ms |
2379.167ms | 689.811ms | 741.040ms |
2372.944ms | 712.103ms | 710.524ms |
2316.005ms | 726.518ms | 726.522ms |
2535.289ms | 733.826ms | 747.427ms |
2560.925ms | 793.680ms | 817.098ms |
平均值 | 平均值 | 平均值 |
2414.56ms | 720.15ms | 755.83ms |
不知道结果有没有让你出乎意料呢?没想到最平常的写法效率最高,为什么?我也没想明白,谁知道就告诉我吧,但我估计写声明的写法是没有意义的。因为len = arr.length
这个arr.length
変数の宣言方法を記述します: for(var i = 0,len = arr.length;i < len;i++){}
forループの他にforEach()
もあり、forEach()
を使うのが最も効率的だという記事もあります。 forEach()
の記述メソッドですが、どちらがより効率的でしょうか?テストを行って見てみましょう。
このテスト変数を走査するには、for ループと foreach の 2 つの記述方法を使用します。
同じ安定したマシンで 10 回のテストを実行し、最後に平均値を取得します。
テストプロセス
テスト変数を作成
まずはしばらく使ってみるループ テスト変数を作成します。詳細は次のとおりです。
for (语句 1; 语句 2; 语句 3) { 被执行的代码块 }時間を測定して実行するコードを作成します。
console.time() と <code>console.timeEnd()
はテスト用です。 🎜🎜これら 3 つの for ループでは、まず 3 つの関数を作成します。それらは 🎜🎜foreach ループのテスト:🎜🎜🎜🎜for(var i=0;i<10;i++){ console.log(i); }🎜変数宣言のない for ループ:🎜🎜🎜🎜
for(var i=10;i--;){ console.log(i); }🎜 変数宣言の書き方 🎜🎜🎜🎜
for (var i = 0, rule; rule = rules[i++];) { //do something }🎜 🎜テスト関数を実行する🎜🎜🎜テスト関数の実行は非常に簡単で、関数を呼び出すだけです🎜🎜🎜🎜
for(var i = 0;i < rules.length;i++){ var rule = rules[i] }🎜🎜テスト結果🎜🎜🎜10回のテストの後、次の結果が得られました🎜
len = arr.length
であるため、この arr.length
はキャッシュされている可能性があるため、ストレージ用に len 変数を宣言することは意味がありません。 🎜🎜🎜for ループを記述する特別な方法🎜🎜🎜 for ループの基本構文は次のとおりです:🎜🎜🎜🎜rrreee🎜🎜🎜ステートメント 1: ループ (コード ブロック) が開始する前に実行します🎜🎜🎜🎜ステートメント 2:実行ループ (コード ブロック) 条件を定義します 🎜🎜🎜🎜 ステートメント 3: ループ (コード ブロック) が実行された後に実行されます 🎜🎜🎜🎜🎜 for ループを使用して 1 ~ 10 を出力すると、次のように書くことができます: 🎜🎜 🎜🎜えー🎜 でも!上記の文法に従って、このように書くこともできます🎜🎜🎜🎜rrreee🎜最初に読んだときは混乱しました、どうやってこのように書くことができるのですか?ステートメント 2 にはループ条件が含まれており、i- は判定条件です。実際、ステートメント 2 で true が返された場合、ループは実行を継続します。 jsでは、条件判定として0,null,unknown,false,'',""を使用すると結果は偽となり、i-が0に達すると偽となりループが終了します。 🎜🎜記事冒頭のコードに戻る🎜🎜🎜🎜rrreee🎜このrule = rules[i++]が判定条件となり、未定義になった場合にループを終了します。このコードを普通に書くと次のようになります: 🎜🎜🎜🎜rrreee🎜 実際には、判断と代入を一緒にして、ループ中に値を代入しているだけです。とても簡単なことではありませんか? 🎜以上がJavaScript での for ループの記述は実行効率にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。