轉→js數組遍歷 千萬不要使用for...in...

看到一篇內容還不錯，但是排版實在糟糕，
逼死強迫症患者啊，直接拉下去找原文連接，找到了，但是已經消失了···500錯誤...
第一次因為實在看不下去一篇博客的排版，
為了排版而轉載...

 轉載地址:http://m.blog.csdn.NET/blog/u014357977/38298263

正文↓

js數組遍歷相信大家都不陌生，很多人會想到for循環和 for...in...循環，但是千萬不要使用for...in...循環遍歷數組，特別是如果你想寫點有用的，能夠移植的代碼時。下面我們來看看這個可惡的for...in...。

1、語法

for (variable in object) 
{
   //do sth ...  
}  

這個語法中有個object，我們知道在javascript中對象這個概念是很寬泛的，那這個地方的對象可以是數組嗎？當然可以，下面是一個例子：

var a = [1, 2, 3, 4];  
for(var i in a){  
    console.log(a[i]);  
}  

這段代碼並不出人所料，會輸出 1 2 3 4，一點問題都沒有，並且是非常正確的用法。但是這只是通常是正確的。

2、for...in...遍歷數組的問題

先上代碼：

    Array.prototype.searchItem = function(value){//函數已被簡化  
        return right;  
    }  
      
    var a = [1, 2, 3, 4];  
    for(var i in a){  
        console.log(a[i]);  
    }  

這段代碼就是在上邊的代碼的基礎上，為Array做了一下擴充。很簡單，只是添加了一個用於搜索的函數（這個函數已被我簡化成和上邊那樣）。但是我們來看運行會出現什么情況：

function (value){  
    return right;  
}   

輸出的結果中，多出了一行，這一行是一個函數，不是我們定義在數組中的值。到此這個問題就出來了。這個真的是你的本意嗎？答案是否定的。

綜上所述，用for...in...在通常情況下確實可以正確運行，但是如果我們的代碼時放到別人的環境中也想跑，那請不要使用for...in...來循環數組。並且這種錯誤往往真的很隱蔽。

3、如何解決上述問題——老老實實寫for循環

在上述的兩種（一種正確，一種錯誤）情況下，for循環總是可以很好的運行，代碼如下：

    Array.prototype.searchItem = function(value){  
        return right;  
    }  
      
    var a = [1, 2, 3, 4];  
    for(var i = 0; i< a.length; i++){  
        console.log(a[i]);  
    }  

老老實實寫好for循環是避免這個錯誤的最好的做法了。當然還有別的辦法，這是這個辦法可以在未來可用，

使用 for...of...語句，但是這個只能在未來使用，而不是現在，

可以參考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of 。

總結一下，用簡單的方法去解決復雜的問題是我們程序員的基本思路，當然如果你為了花哨而落入陷阱那你只能自己爬出來。