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

時間 2019-12-11

標籤 javascript 遍歷數組最好不要使用欄目 JavaScript 简体版

原文原文鏈接

先看一段代碼html

 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類型。框架

這還不是坑，只是一點區別。函數

再看一段代碼spa

 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作了一下擴充。很簡單，只是添加了一個函數。可是咱們來看運行會出現了什麼狀況：prototype

輸出的結果中，多出了一行，這一行就是咱們擴展的一個函數，不是咱們定義在數組中的值。到此這個問題就出來了。code

綜上所述，用for...in...在一般狀況下確實能夠正確運行。htm

可是若是咱們在項目採用的是用foreach遍歷數組，假設有一天誰不當心本身爲了擴展js原生的Array類，或者引入一個外部的js框架也擴展了原生Array。那問題就來了。blog

因此最好仍是用for循環遍歷數組ip