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遍历对象的属性就介绍到这了。