2. 程式人生 > >JavaScript中for迴圈的幾種寫法與效率總結

JavaScript中for迴圈的幾種寫法與效率總結

阿新 • • 發佈：2019-02-11

前言

對於for迴圈，相信大家再常用不過了。但是這回說下for迴圈是因為看程式碼時我居然沒有看明白一個for迴圈的意思，真是不應該啊。

這個for迴圈是這麼寫的：

?

1

2

3

for (var i = 0, rule; rule = rules[i++];) {

//do something

}

這個寫法是什麼意思呢？後面再說，現賣個關子，這個寫法我感覺還是挺好的。

for迴圈寫法對效率的影響

說上面那段程式碼之前，先說一下for迴圈的效率問題。在接觸js時關於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迴圈做個測試變量出來，這個很簡單，具體如下：

?

1

2

3

4

5

6

var testArrs = [],

i = 0;

while(i<40000000){

testArrs.push(i);

i++;

}

編寫相應測試函式

測量和執行時間的程式碼，我用的是console.time()和console.timeEnd()來進行測試。

針對這個三個for迴圈，先做出三個函數出來，他們分別是

foreach迴圈測試:

?

1

2

3

4

5

6

7

8

function testForeach(testArrs){

console.time('foreach');

var newArrs = [];

testArrs.forEach(function(i){

newArrs.push(i);

});

console.timeEnd('foreach');

}

沒有宣告變數的for迴圈:

?

1

2

3

4

5

6

7

8

function testNoDeclare(testArrs){

console.time('no declare');

var newArrs = [];

for(var i = 0;i<testArrs.length;i++){

newArrs.push(i);

}

console.timeEnd('no declare');

}

有變數宣告的寫法

?

1

2

3

4

5

6

7

8

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');

}

執行測試函式

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

?

1

2

3

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可能已經快取起來了，所以我們在宣告個len變數來儲存是沒有意義的。

最後附上全部測試程式碼，複製到自己的電腦上直接就可以測試了，要是有不合理的地方請告訴我吧

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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迴圈的基本語法是:

?

1

2

3

4

for (語句 1; 語句 2; 語句 3)

{

被執行的程式碼塊

}
  1. 語句1：在迴圈（程式碼塊）開始前執行
  2. 語句2：定義執行迴圈（程式碼塊）的條件
  3. 語句3：在迴圈（程式碼塊）已被執行之後執行

如果我們用for迴圈要輸出1到10，我們可以這麼寫:

?

1

2

3

for(var i=0;i<10;i++){

console.log(i);

}

但是！根據上面的語法說明，我們也可以寫成這樣

?

1

2

3

for(var i=10;i--;){

console.log(i);

}

剛開始看的時候我也很疑惑，怎麼能這麼寫？語句2放的是迴圈條件，i–是什麼判斷條件。其實不然，在語句2中，如果返回true迴圈會繼續執行。在js中0,null,undefined,false,'',””作為條件判斷時，其結果為false，也就說當i–到0的時候就是false，迴圈就終止了。

再回到文章開頭的程式碼

?

1

2

3

for (var i = 0, rule; rule = rules[i++];) {

//do something

}

這個rule = rules[i++]就是判斷條件，當成為undefined時就會終止迴圈啦。所以這段程式碼換成普通寫法就是這樣的：

?

1

2

3

for(var i = 0;i < rules.length;i++){

var rule = rules[i]

}

其實就是把判斷和賦值放到一起了，一邊迴圈一邊賦值。是不是挺簡單？

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。

相關推薦

JavaScript中for迴圈的幾種寫法與效率總結

前言 對於for迴圈，相信大家再常用不過了。但是這回說下for迴圈是因為看程式碼時我居然沒有看明白一個for迴圈的意思，真是不應該啊。 這個for迴圈是這麼寫的： ? 1 2 3 for (var i = 0, rule;

javascript中for迴圈的幾種寫法與總結

如果您希望一遍又一遍地執行相同的程式碼，並且每次的值都不同，那麼使用迴圈是很方便的。迭代語句又叫迴圈語句。 JavaScript 支援不同型別的迴圈： for - 迴圈程式碼塊一定的次數 for/in - 迴圈遍歷物件的屬性 while - 當指定

JAVA for迴圈的幾種寫法和效率

String[] stringS = {"A","B","C","D"}; Collection stringlists = java.util.Arrays.asList(stringS); for(int i = 0;i < stringS.length;i ++){

javaScript中常見的幾種報錯類型

變量類型 最大 tro 堆棧 malformed {} 原因 s函數 舉例 一般我們運行代碼的時候，在控制臺報錯會相應的顯示你錯誤的行數，找到那一行，查找你相應的錯誤 1、xxx is not defined xxx 沒有定義 2、xxx is

javaScript中陣列的幾種常用方法

1.splice(2,3,4)刪除陣列中任意項(三個引數). 2.splice(1,3)刪除從第一項開始的往後三項(兩個引數).(splice可以結合pop(),unshift(),push(),shift()來理解) 3.push()在陣列的末尾增加一項. 4.unshift()在陣列

踩坑：javascript中for迴圈，變數不是Number型別導致for迴圈不執行

情景：從html獲取4對{起點元素（id記為start）和終點元素（id記為end）}，遍歷起點到終點的所有元素，並打印出元素id（假設id連續）解決方案:Number(待轉換數)進行強制轉換js程式碼：控制檯：如上圖控制檯：第一對兒元素{43，46}，進入for迴圈正常列印

JavaScript中for迴圈，while迴圈，do......while迴圈。

一.for迴圈 for迴圈語法結構： for(迴圈條件初始化;迴圈條件判斷;迴圈迭代){ 迴圈體; } 執行規則： 第一步：迴圈條件的初始化 var i=0; 只在最開始執行一次 第二步：迴圈條件判斷 i<5; 若判斷條件結果為真：則執行迴圈體 若不成立： 結束迴圈;

robot framework for迴圈幾種方式

1、普通for迴圈 2、巢狀for迴圈 infor 3、for - in range 迴圈 普通for- in range for - in range +start-end-step (step-2未截圖出來) 由10開始遞減到2，幅度為2 4、for - in enum

kockout.js的viewmodel物件的屬性，在javascript中呼叫的兩種寫法

第一種：  <div>計數：<span data-bind="text: countNumber"></span></div> <button type="submit" data-bind="click: addCou

實際業務中碰到的幾種ajax請求方法總結

最近在做一個針對單個節點測速的功能頁面，測速的邏輯是，測上傳速度時，前端傳5m資料給server，記錄上傳和返回資料的時間，測下載速度時，從server下載1m的資料，記錄下載和下載成功的時間，上傳和下載用的是ajax同步以避免客戶端頻寬阻塞的問題，並進行3次取平均值。在開發過程過，因為ajax同步

javascript中for、each以及foreach的效率對比

今天同事說js的前端中for的效率比較高，自己不信，因為我記得php中foreach的效率比for的效率高，然後自己做了一個測試，如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h

shell指令碼檔案中for迴圈的兩種寫法

#!/bin/bash for (( i = 0; i <= 10; i++ )) ; do echo "The value is: $i" done echo -e "\nJourneys end in lovers' meeting."

Javascript迴圈刪除陣列中元素的幾種方法示例

發現問題 大家在碼程式碼的過程中，經常會遇到在迴圈中移除指定元素的需求。按照常規的思路，直接一個for迴圈，然後在迴圈裡面來個if判斷，在判斷中刪除掉指定元素即可。但是實際情況往往不會像預想的那樣順利執行。 下面以一段Javascript程式碼為例演示這一過程。

Shell中for迴圈的幾個常用寫法

 第一類：數字性迴圈 -----------------------------for1-1.sh #!/bin/bash for((i=1;i<=10;i++)); do echo $(expr $i \* 3 + 1); done ------------

shell裡for迴圈的幾種寫法

背景：for迴圈是常用的語法結構，shell裡的for迴圈與其它語言有些差別，這裡提供3個模板，以1~50的累加為例指令碼內容如下：#!/bin/bash#test.shell#1.列表for迴圈{}中可以是一個listsum=0for i in {1..50}do     

Java中迭代列表中資料時幾種迴圈寫法的效率比較

Java中經常會用到迭代列表資料的情況，本文針對幾種常用的寫法進行效率比較。雖然網上已經有了類似的文章，但是對他們的結論並不認同。 常見的實現方法： 1.for迴圈： for(int i = 0; i < list.size(); i++) for(int i =

Java for迴圈的幾種寫法

J2SE 1.5提供了另一種形式的for迴圈。藉助這種形式的for迴圈，可以用更簡單地方式來遍歷陣列和Collection等型別的物件。本文介紹使用這種迴圈的具體方式，說明如何自行定義能被這樣遍歷的類，並解釋和這一機制的一些常見問題。 在Java程式中，要“逐

JAVA for迴圈的幾種寫法。

J2SE 1.5提供了另一種形式的for迴圈。藉助這種形式的for迴圈，可以用更簡單地方式來遍歷陣列和Collection等型別的物件。本文介紹使用這種迴圈的具體方式，說明如何自行定義能被這樣遍歷的類，並解釋和這一機制的一些常見問題。 在Java程式中，要“逐一處理”――或者說，“遍歷”――某一個數組或

a標籤中呼叫javascript方法的幾種方法與window.open()

我們常用的在a標籤中有點選事件： 1. a href="javascript:js_method();" 這是我們平臺上常用的方法，但是這種方法在傳遞this等引數的時候很容易出問題，而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window

mybaties中，模糊查詢的幾種寫法

uil 字符串 csdn clip data boa 大小寫 用法 .net 模糊查詢： 工作中用到，寫三種用法吧，第四種為大小寫匹配查詢 1. sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CO