JavaScript的幾種循環使用方式及性能解析

循環的類型

一：for

var arr = [1, 2, 3, 4, 5, 6];
for (var i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

在for循環中定義的新變量相當於在循環體外定義的變量，所以可以寫成如下格式。

var i = 0, len = arr.length;
for (; i < len; i++) {
    console.log(arr[i]);
}

每次循環執行結束都會對i進行增量操作（增量可以爲負數），所以可以將增量操作寫到代碼塊最後執行。

i++只是其中常用寫法，也可以是i = i +2其他方式。

var i = 0, len = arr.length;
for (; i < len;) {
    console.log(arr[i]);
    i++;
}

二：for-in  一般用於遍歷對象

var obj = {a: 1, b: 2, c: 3 };
for (var key in obj) {
    console.log(key + ": " + obj[key]); //a: 1 b:2 c:3
}

三：for-of   ES6新增！ 允許遍歷數組、字符串、Map等可迭代的數據結構！

var arr = [1, 2, 3, 4, 5];
for (var v of arr) {
    console.log( v); //1 2 3 4 5
}

var str = "abcdefg";
for (var v of str) {
    console.log(v); //a b c d e f g
}

四：while

var i = 0;
while(i < 5) {
    console.log(i); //0 1 2 3 4
    i++;
}

五：do-while

var i = 0;
do {
    console.log("do: " + i); //0 1 2 3 4
    i++;
}
while(i < 5)

do-while循環是while的一個變形，先執行在判斷，所以它至少會執行一次。

var i = 10;
do {
    console.log("do: " + i); //10
    i++;
}
while(i < 5)

循環的性能！！！

for-in的循環性能是明顯慢與其他幾種循環，它的每次迭代操作的同時都是會去搜索原型或者原型屬性，產生額外開銷，所以 

避免使用for-in循環！

不要用for-in來迭代數組！

性能優化！！！

1：減少迭代的工作量，減少對象成員及數組項的查找次數

2：倒序循環，會略微提升性能

var arr = [1, 2, 3, 4, 5];
for (var i = arr.length; i--;) { //將控制條件簡單的與零比較，任何非零數自動轉爲true，而零值則爲false。
    console.log(i); //從兩次迭代比較（迭代數小於總數嗎？他是否爲true？）減爲一次（它是true嗎？）
}

1+2優化可以提升運行速度比原始版本快50%~60%。

PS：基於函數的迭代forEach()被原生支持，但是他的速度慢於基於循環的迭代，因爲它對每個數組項都調用外部方法所帶來的開銷比較大，這是速度慢的主要原因，基於循環的迭代是基於函數迭代速度快八倍，所以forEach()一般不作於循環的選擇。