JavaScript遍历对象的属性

快乐打工仔 分类:实例代码

JavaScript遍历对象的属性属于前端实例代码,有关更多实例代码大家可以查看

下面通过代码实例介绍一下如何遍历对象中的属性。

一.遍历对象直接量:

var web={
  webName:"前端教程网",
  webAddress:"青岛市南区",
  age:2
}

以上代码创建了一个对象直接量,属性遍历如下:

var web={
  webName:"前端教程网",
  webAddress:"青岛市南区",
  age:2
}
for(var property in web){
  console.log(property);
}

以上代码使用for in语句对对象的属性进行了遍历并输出。

for in语句可以遍历继承自原型对象的属性,代码实例如下:

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 | 。

在实际应用中,可能不想遍历继承的属性,代码如下:

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 | 。

JavaScript遍历对象的属性,这样的场景在实际项目中还是用的比较多的,关于JavaScript遍历对象的属性就介绍到这了。

回复

我来回复
  • 暂无回复内容