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循環遍歷數組