2012年10月9日 星期二

JavaScript For 與 For in

For 與 For In
  • for 功用是迭代陣列,用於陣列或類似陣列的物件。
  • for in 功用是列舉非陣列的物件,就是一一列舉出非陣列物件的屬性。
Note:

  技術上for in也可以用於Array,因為在JavaScript環境中,Array也是物件,但是不要這麼做,因為fon in不像for會確保迭代的順序,另外若是物件有客製化擴充功能,可能會導致邏輯上的錯誤發生。


在使用for in列舉物件時可以使用hasOwnProperty()來過濾掉來自原型鏈(prototype chain)上的屬性。



<script>
(function(window, undefined){    
    var car = {
        name:'Golf',
        color:"Black" 
    };
    
    //假設在程式的其他地方有人對Object原生物件增加了一個方法
    if(typeof Object.prototype.printName === 'undefined'){
        Object.prototype.printHaHa = function(){
            console.log('ha ha');
        }
    }
    
    
    //使用fon in 列舉屬性時    
    for(var attribute in car){
        console.log(attribute,':',car[attribute]);
    }   
    
    console.log('-------------------------------');
    
    //使用hasOwnProperty來過濾    
    for(var attribute in car){
        if(car.hasOwnProperty(attribute)){
            console.log(attribute,':',car[attribute]);
        }
    }
})(window);
</script>

chrome上的輸出:


printHaHa : function (){ console.log('ha ha'); } filter_pototype_attribute.html:25
------------------------------- filter_pototype_attribute.html:28
color : Black



我們可以看到,虛線分隔之後的輸出,不會列舉出printHaHa項目。