JavaScript中for..in循環的陷阱

              JavaScript中for..in循環陷阱

大家都知道在JavaScript中提供了兩種方式迭代對象：

 

for (1) 循環；

使用for迴圈進行迭代數組對象，想必大家都已經司空見慣了。但是，使用for.. in迴圈時，大家可要注意了，為什麼這麼說呢？大家聽我娓娓道來....

 

javascript提供了一個特殊的循環（也就是for .. in循環），用來迭代對象的屬性或數組的每個元素，for... in循環中的循環計數器是字串，而不是數字。它包含目前屬性的名稱或目前數組元素的索引。

 

案例一：

               //使用for..in循环遍历对象属性
 
               varperson={
 
                       name: "Admin",
 
                       age: 21,
 
                       address:"shandong"
 
               };
 
              
 
               for(vari in person){
 
                       console.log(i);
 
               }

 

執行結果為：

 

name

當遍歷一個物件的時候，變數i 也就是循環計數器為對象的屬性名稱

               //使用for..in循环遍历数组
 
               vararray = ["admin","manager","db"]
 
               for(vari in array){
 
                       console.log(i);
 
               }

 

 

執行結果：

 

0

 

1

0

 

1

變數i 也就是循環計數器為目前數組元素的索引

 

 

 

案例二：

 

但是，現在看來for .. in循環還挺好用啊，不過，別高興，看看下面的例子：看下面的例子：運作結果：

 

admin

 

manager

 

db

 

，一個奇異果angsan

 

現在，再看看使用for迴圈會怎樣？

                 var array =["admin","manager","db"];
 
                 //给Array的原型添加一个name属性
 
                 Array.prototype.name= "zhangsan";
 
                 for(var i in array){
 
                    alert(array[i]);
 
                 }

 

運行結果：

 

admin

 

manager

 

方法與屬性給遍歷出來，所以這可能會導致程式碼中出現意外的錯誤。為了避免這個問題，我們可以使用物件的hasOwnProperty()方法來避免這個問題，如果物件的屬性或方法是非繼承的，那麼hasOwnProperty() 方法會回傳true。即這裡的檢查不涉及從其他物件繼承的屬性和方法，只會檢查在特定物件本身中直接建立的屬性。

 

案例三：

               vararray = ["admin","manager","db"];
 
                //给Array的原型添加一个name属性
 
               Array.prototype.name = "zhangsan";
 
               for(var i =0 ; i<array.length; i++){
 
                      alert(array[i]);
               };

 

一切又完好如初，哎，不知道，同志們看完有什麼感受，是不是有種「撥開雲霧見晴天」的感覺啊，呵呵