JavaScriptの中でfor循環のいくつかの書き方と効率は総括します。


前言
forサイクルについては、みんながもう使えないと思います。しかし、今回のforサイクルはコードを見ている間にforサイクルの意味が分かりませんでした。
このforサイクルはこう書きます。

for (var i = 0, rule; rule = rules[i++];) {
 //do something
}
この書き方はどういう意味ですか?あとでもう一度言ってください。今は関所を売って、この書き方はいいと思います。
for循環書き方が効率に及ぼす影響
上記のコードを言う前に、forサイクルの効率問題について話してください。jsに接する時、forサイクルに関する書き方と効率に影響する文章が多いです。しかし、全体としては、forサイクルの書き方には、この2つがあります。
  • 宣言変数の書き方を書かない:for(var i = 0;i<arr.length;i++){}
  • 宣言変数の書き方:for(var i = 0,len = arr.length;i < len;i++){}
  • forサイクル以外にもforEach() があります。効率が一番高いという文章もあります。forEach()で書くのをオススメします。いったいどれが効率がいいですか?テストをしてみましょう。
    テストプラン
    全体のテストプランは以下の通りです。
  • は4千万個の試験配列変数を行います。
  • は、それぞれ2つの書き方のforサイクルとforeachでこのテスト変数を巡回します。
  • は同じ安定マシンで10回のテストを行い、最後に平均値を取ります。
  • 試験環境:CPU:Inter(R)Core i 5-3210 M、RAM:12 GM、system:win 10(x 64)
  • テストの流れ
    試験変数の作成
    まずwhile循環でテスト変数を作ってください。これは簡単です。具体的には以下の通りです。
    
    var testArrs = [],
     i = 0;
    while(i<40000000){
     testArrs.push(i);
     i++;
    }
    対応するテスト関数の作成
    測定と実行時間コードはforEach()console.time()を使ってテストします。
    この三つの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.911 ms
    672.55 ms
    743.974 ms
    2431.81 ms
    710.275 ms
    805.676 ms
    2422.448 ms
    729.287 ms
    741.014 ms
    230.894 ms
    73.200 ms
    755.390 ms
    2423.186 ms
    703.555 ms
    769.674 ms
    2379.167 ms
    689.811 ms
    741.040 ms
    2372.94 ms
    712.033 ms
    710.524 ms
    2316.005 ms
    726.518 ms
    726.522 ms
    2535.289 ms
    733.826 ms
    747.427 ms
    250.925 ms
    793.680 ms
    817.098 ms
    平均値
    平均値
    平均値
    2414.56 ms
    720.15 ms
    755.83 ms
    結果があなたに予想外だったことがありますか?一番普段の書き方が一番効率がいいとは思いませんでしたが、なぜですか?私も分かりたくないです。誰か知ったら教えてください。でも、声明の書き方は意味がないと思います。console.timeEnd()というlen = arr.lengthはキャッシュされているかもしれないので、我々はlen変数を宣言して格納することには意味がない。
    最後にテストコードを全部添付して、自分のパソコンにコピーして直接テストできます。不合理なところがあったら教えてください。
    
    var testArrs = [],
     i = 0;
    while(i<40000000){
     testArrs.push(i);
     i++;
    }
    function testForeach(testArrs){
     console.time('foreach');
     var newArrs = [];
     testArrs.forEach(function(i){
     newArrs.push(i);
     });
     console.timeEnd('foreach');
    }
    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);
    forサイクルの特殊な書き方
    次の文章で話し始めたばかりのコードは分かりませんでした。前に復習してから慣れないfor循環文法と言います。forサイクルの基本的な文法は以下の通りです。
    
    for (   1;    2;    3)
    {
           
    }
  • 文1:ループ(コードブロック)が開始される前に実行される
  • 文2:ランサイクル(コードブロック)を定義する条件
  • 文3:ループ(コードブロック)が実行された後に実行されます。
  • forサイクルで1から10まで出力するなら、私達はこのように書くことができます。
    
    for(var i=0;i<10;i++){
    console.log(i);
    }
    でも!上の文法の説明によって、私達もこのように書くことができます。
    
    for(var i=10;i--;){
    console.log(i);
    }
    最初に見た時は私も戸惑っていましたが、どうやってこのように書くのですか?語句2は循環条件ですが、iCはどのような判断条件ですか?そうではないです。ステートメント2では、trueループに戻ると実行されます。jsの中で0,null,undefined,false,''','を条件として判断した場合、その結果はfalseであり、つまりiCが0になるとfalseとなり、サイクルは終了します。
    記事の先頭のコードに戻ります。
    
    for (var i = 0, rule; rule = rules[i++];) {
     //do something
    }
    このrule=rules[i+]は判定条件で、undefinedになるとループが終了します。だからこのコードを普通の書き方に変えます。
    
    for(var i = 0;i < rules.length;i++){
     var rule = rules[i]
    }
    実は判断と賦課を一緒にして、循環しながら賦課します。簡単ですか?
    締め括りをつける
    以上はこの文章の全部の内容です。本文の内容は皆さんの学習やJavascriptを使うことに対して一定の助けをもたらすことができると思います。もし疑問があれば、メッセージを残して交流してもいいです。