JavaScript中对象的属性:如何遍历属性

for/in 语句循环遍历对象的属性。 
js中获取key得到某对象中相对应的value的方法:obj.key 
js中根据动态key得到某对象中相对应的value的方法有二: 
一、var key = "name1";var value = obj[key]; 
二、var key = "name1";var value = eval("obj."+key); 

object对象没有length属性,那么获取object对象的length就可以通过遍历得到key值的数组的长度来获取啦~ 

 使用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问: 

Object.prototype.bar = 10;// 修改Object.prototype  
var obj={"name":"wjy","age":26,"sex":"female"};//定义一个object对象    
var keys=[];//定义一个数组用来接受key    
var values=[];//定义一个数组用来接受value    
  for(var key in obj){    
    keys.push(key);    
    values.push(obj[key]);//取得value      
    }    
alert("keys is :"+keys+" and values is :"+values);   
//keys is : name,age,sex,bar and values is : wjy,26,female,10  

  推荐总是使用 hasOwnProperty 方法, 这将会避免原型对象扩展带来的干扰: 

function allpro(obj){  
    var keys=[];   
    var values=[];    
    for(var key in obj){   
        //只遍历对象自身的属性,而不包含继承于原型链上的属性。  
        if (obj.hasOwnProperty(key) === true){  
            keys.push(key);    
            values.push(obj[key]);   
            }                 
        }  
    alert("keys is :"+keys+" and values is :"+values);    
}  
Object.prototype.bar = 1;// 修改Object.prototype  
var o={"name":"wjy","age":26,"sex":"female"};//定义一个object对象   
allpro(o);  
//keys is : name,age,sex and values is: wjy,26,female  

  

1.遍历可枚举的自身属性

可枚举的意思就是该属性的[[Enumerable]]特性为true,自身属性的意思就是该属性不是从原型链上继承下来的.

(function () {
    var propertys = Object.keys(window);
    alert(propertys.length);         //3
    alert(propertys.join("\n"));     //window,document,InstallTrigger,除了最后一个是火狐私有的属性,原来window对象只有两个可枚举的自身属性.window属性指向window对象自身,一般没什么用.
})()

  

2.遍历所有的自身属性

特性为不可枚举的属性也并不是遍历不到,ES5给我们提供了getOwnPropertyNames方法,可以获取到一个对象的所有自身属性.

(function () {
    var propertys = Object.getOwnPropertyNames(window);
    alert(propertys.length);       //72
    alert(propertys.join("\n"));   //Object,Function,eval等等
})()

  

3.遍历可枚举的自身属性和继承属性

 继承属性怎么遍历,你应该知道,就是最常用的for in遍历

(function () {
    var getEnumPropertyNames = function (obj) {
        var props = [];
        for (prop in obj) {
            props.push(prop);
        }
        return props;
    }
    var propertys = getEnumPropertyNames(window);
    alert(propertys.length);       //185
    alert(propertys.join("\n"));   //addEventListener,onload等等
})()

  

4.遍历所有的自身属性和继承属性

这种遍历主要用在各种js调试工具的代码补全功能上.比如Firebug的.

(function () {
    var getAllPropertyNames = function (obj) {
        var props = [];
        do {
            props = props.concat(Object.getOwnPropertyNames(obj));
        } while (obj = Object.getPrototypeOf(obj));
        return props;
    }
    var propertys = getAllPropertyNames(window);
    alert(propertys.length);          //276
    alert(propertys.join("\n"));      //toString等
})()

  

posted @ 2017-09-01 10:22  lanyan  阅读(3477)  评论(0编辑  收藏  举报