首頁 > web前端 > js教程 > JavaScript中for迴圈寫法對運作效率有什麼影響?

JavaScript中for迴圈寫法對運作效率有什麼影響?

伊谢尔伦
發布: 2017-07-19 14:40:57
原創
2445 人瀏覽過

for迴圈寫法對效率的影響

總的來說對於for迴圈的寫法有這麼兩種:

  1. 不寫宣告變數的寫法:for(var i = 0;i<arr.length;i++){}

  2. 寫入宣告變數的寫法:for (var i = 0,len = arr.length;i < len;i++){}

除了for迴圈還有forEach() ,也有文章說forEach()效率最高,推薦用forEach()寫法,那麼到底哪個效率高呢?做個測試來看看吧。

測試方案

總的測試方案如下:

  1. 做一個容納4千萬的測試陣列變數。

  2. 分別用兩種寫法的for迴圈和foreach對這個測試變數進行遍歷。

  3. 在同一台穩定機器上,進行10次測試,最後取平均值。

  4. 測試環境: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(&#39;foreach&#39;);
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd(&#39;foreach&#39;);
}
登入後複製

沒有宣告變數的for循環:


function testNoDeclare(testArrs){
 console.time(&#39;no declare&#39;);
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;no declare&#39;);
}
登入後複製

有變數宣告的寫法


##

function testUseDeclare(testArrs){
 console.time(&#39;use declare&#39;);
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;use declare&#39;);
}
登入後複製

執行測試函數

執行測試函數這裡很簡單啦,就是呼叫函數就可以了


testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);
登入後複製

測試結果

經過10次測試,得到了以下結果

foreach不寫宣告寫宣告2372.891ms672.530ms743.974ms#2431.821ms2431.821ms #710.275ms805.676ms2422.448ms729.287ms741.014ms#2330.894ms730.200ms#755.390ms2423.186ms#703.255ms769.674 ms2379.167ms689.811ms741.040ms#2372.944ms710.524ms726.522ms#747.427ms817.098 ms平均值
##2372.944ms #712.103ms
2316.005ms726.518ms
2535.289ms733.826ms
2560.925ms#793.680ms
平均值平均值

2414.56ms720.15ms

755.83ms

#不知道結果有沒有讓你出乎意料呢?沒想到最平常的寫法效率最高,為什麼?我也沒想明白,誰知道就告訴我吧,但我估計寫聲明的寫法是沒有意義的。因為

len = arr.length

這個
arr.length

可能已經快取起來了,所以我們在宣告個len變數來儲存是沒有意義的。
  1. for迴圈的特殊寫法

  2. for迴圈的基本語法是:

  3. ##
    for (语句 1; 语句 2; 语句 3)
    {
    被执行的代码块
    }
    登入後複製

  4. 語句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放的是循環條件,i–是什麼判斷條件。其實不然,在語句2中,如果回傳true迴圈會繼續執行。在js中0,null,undefined,false,'',”」作為條件判斷時,其結果為false,也就說當i–到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中for迴圈寫法對運作效率有什麼影響?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板