JavaScript遍歷物件的屬性

下面通過程式碼例項介紹一下如何遍歷物件中的屬性。

一.遍歷物件直接量：

[JavaScript] 純文字檢視 複製程式碼
var web={
  webName:"螞蟻部落",
  webAddress:"青島市南區",
  age:2
}

以上程式碼建立了一個物件直接量，屬性遍歷如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var web={
  webName:"螞蟻部落",
  webAddress:"青島市南區",
  age:2
}
for(var property in web){
  console.log(property);
}

以上程式碼使用for in語句對物件的屬性進行了遍歷並輸出。

for in語句可以遍歷繼承自原型物件的屬性，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Function.prototype.addMethod=function(methodName,func){ 
  if(!this.prototype[methodName]){ 
    this.prototype[methodName]=func;
  } 
  return this.prototype;
} 
function CustomObject(name,value){ 
  this.name=name || 'CustomeObject'; 
  this.value=value || 0; 
  this.toString=function(){ 
    return '[name:'+this.name+',value:'+this.value+']'
  } 
} 
 
CustomObject.addMethod('testFun',function(){}) 
var obj=new CustomObject(); 
var info=''; 
for(var property in obj){ 
  info+=property+" | "; 
} 
console.log((info));

以上程式碼的輸出值是:name | value | toString | testFun | 。

在實際應用中，可能不想遍歷繼承的屬性，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Function.prototype.addMethod=function(methodName,func){ 
  if(!this.prototype[methodName]){ 
    this.prototype[methodName]=func;
  } 
  return this.prototype;
} 
function CustomObject(name,value){ 
  this.name=name || 'CustomeObject'; 
  this.value=value || 0; 
  this.toString=function(){ 
    return '[name:'+this.name+',value:'+this.value+']'
  } 
} 
CustomObject.addMethod('testFun',function(){}) 
var obj=new CustomObject(); 
var info=''; 
for(var property in obj){ 
  if(!obj.hasOwnProperty(property)) continue; 
  info+=property+" | "; 
}
console.log((info));

以上程式碼是根據上一段程式碼改造而來，使用hasOwnProperty()判斷屬性是否是繼承的，如果是繼承的就進行下一個迴圈，否則將進行字串連線。輸出結果是:name | value | toString | 。