歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

JavaScript中遍歷數組 最好不要使用 for in 遍歷

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

Copyright © Linux教程網 All Rights Reserved