詳細介紹javascript中的幾種for循環的區別

偶然間見到了forEach循環，感受很新奇，就研究了一下，順帶着把js中的幾種for循環作了一個比較。

首先，簡單說一下，js中一共大概有四種for循環：（1）、那種簡單常見的for循環；（2）、for-in循環；（3）、forEach循環；（4）、es6中新增的for-of循環。

（1）簡單的for循環

   例如

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

View Code

當遍歷的數組長度不變時，能夠選擇將數組的長度用一個變量保存下來，這樣會得到更好的效率。

好比

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

View Code

（2）for-in循環，我通常是在遍歷對象的時候用的比較多。其實for-in循環也能夠遍歷數組，只不過有時候會出現一些問題。好比：

1         var arr = [1,2,3,4,5];
2         arr.name = 'lili';
3         for(var i in arr){
4             console.log(arr[i])
5         }
6 //  會打印出 1,2,3,4,5，lili  

View Code

對，沒錯，它把最後添加的屬性也給遍歷了。咱們知道，在js中，數組Array也是屬於對象的，因此，for-in在遍歷對象的時候，會把全部的屬性都會遍歷一遍而不單單是索引（另，數組中的索引不是Number類型的，而是String類型的），還包括原型鏈上的可枚舉屬性。因而可知，for-in並不適合來遍歷數組。可是還有一種特殊的狀況，那就是稀疏數組。好比：

1        var arr = [];
2         arr[0] = 100;
3         arr[10] = 102;
4         arr[15] = 104;
5         for(var i in arr){
6             console.log(arr[i])
7         }
8 //    輸出結果是 100,102,104

View Code

對比普通的for循環：

 1    var arr = [];
 2         arr[0] = 100;
 3         arr[10] = 102;
 4         arr[15] = 104;
 5 //        for(var i in arr){
 6 //            console.log(arr[i])
 7 //        }
 8 ////    輸出結果是 100,102,104
 9 
10         for(var i=0;i<arr.length;i++){
11             console.log(arr[i])
12         }
13 //輸出 100，undefined，102，undefined，104

View Code

for-in只遍歷了三次，而普通的for循環遍歷了16次。只要處理得當，for-in循環在數組循環當中也能發揮巨大的做用。

（3）forEach循環，這個我在項目中仍是不多用到，偶然間看ife的題的時候看見了，就很好奇。

forEach方法爲數組中含有有效值的每一項執行一次callback函數，那些已經刪除的或者沒有被賦值的項會被跳過。callback函數會被依次傳入三個參數，

1.數組當前項的值，2.數組當前項的索引，3.數組對象自己。若是隻傳入一個參數，則默認是數組當前項。例如：

 1         var arr = [1,2,3,4,5];
 2         arr.forEach(function(i){
 3             console.log(i)
 4         })
 5 //        輸出爲1,2,3,4,5
 6         arr.forEach(function(value,index,arr){
 7             console.log("當前項"+value)
 8             console.log("當前項索引"+index)
 9             console.log("數組自己"+arr)
10         })
11 //        輸出 當前項1，當前索引0，數組自己【1，2,3,4,5】
12 //        輸出 當前項2，當前索引1，數組自己【1，2,3,4,5】
13 //        依次類推。。。。。。

View Code

須要注意的是，forEach遍歷的範圍在第一次調用callback的時候就已經肯定了。調用callback以後，再添加的項就不會被遍歷了。而且forEach不能break和return，若是想要跳出循環，就要用到try語句，因此forEach雖然有時候很方便簡短，可是也有坑的時候哇。。

 

最後一種for-of循環，我們稍後再續。。。。。