JavaScript中遍歷數組 最好不要使用 for in 遍歷,先看一段代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script> 10 // 一個普通的數組 11 var arr =[3,5,2,6]; 12 // 普通的for 循環遍歷 13 for(var i = 0 ; i < arr.length; i++){ 14 console.log(i,"類型:"+typeof i,arr[i]); 15 } 16 // 用for in 遍歷數組 17 for(var k in arr){ 18 console.log(k,"類型:"+typeof k,arr[k]); 19 } 20 </script> 21 </body> 22 </html>
這段代碼顯示出了 一點 for循環遍歷數組 和for in 循環遍歷 數組的一點區別:
標准的for循環中的i是number類型,表示的是數組的下標,但是foreach循環中的i表示的是數組的key是string類型。
這還不是坑,只是一點區別。
再看一段代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script> 10 // 一個普通的數組 11 var arr =[3,5,2,6]; 12 // 在數組原型上擴展一個方法 13 Array.prototype.extend = function(){ 14 console.log("在數組原型擴展一個方法"); 15 } 16 // 普通的for 循環遍歷 17 for(var i = 0 ; i < arr.length; i++){ 18 console.log(i,"類型:"+typeof i,arr[i]); 19 } 20 // 用for in 遍歷數組 21 for(var k in arr){ 22 console.log(k,"類型:"+typeof k,arr[k]); 23 } 24 </script> 25 </body> 26 </html>
這段代碼就是在上邊的代碼的基礎上,為Array做了一下擴充。很簡單,只是添加了一個函數。但是我們來看運行會出現了什麼情況:
輸出的結果中,多出了一行,這一行就是我們擴展的一個函數,不是我們定義在數組中的值。到此這個問題就出來了。
綜上所述,用for...in...在通常情況下確實可以正確運行。
但是如果我們在項目采用的是用foreach遍歷數組,假設有一天誰不小心自己為了擴展js原生的Array類,或者引入一個外部的js框架也擴展了原生Array。那問題就來了。
所以最好還是用for循環遍歷數組