Javascript中如何遍历属性

遍历属性，我们首先要搞清楚for in，再来谈遍历：

关于for in

for...in 声明用于对数组或者对象的属性进行循环/迭代操作。

// 对于数组：迭代出来的是数组元素
var mycars = ['Saab','Volvo','BMW']; 
for (x in mycars) {  
    console.log(x); // 0 1 2
    console.log(mycars[x]); // Saab Volvo BMW
} 

// 对于对象 ，迭代出来的是对象的属性
var obj = {  
    w: "wen",
    j: "jian",
    b: "bao"  
}  
for(var v in obj){  
    console.log(v); // w j b
    console.log(obj[v]); // wen jian bao
}

判断对象是否为 数组/对象 的 元素/属性：

语法为：

for (变量 in 对象) {
    在此执行代码
}

当“对象”为数组时，变量指的是数组的下标（索引）；

var arr = ["a","b","2","3","str"]; 

var result = ("b" in arr);  
var result1 = (4 in arr);  

console.log(result);  //false
console.log(result1);  //true

当“对象”为对象时，变量指的是对象的属性；

var obj = {
     w:"wen",  
     j:"jian",  
     b:"bao"  
};
      
var result = (2 in obj);      
var result1 = ("j" in obj);  
  
console.log(result);  //false
console.log(result1);  //true

关于for in的其他参考：

• for in的缺陷
• 各浏览器中for in顺序的差异

关于遍历

在JavaScript中，遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单，这主要有两个方面的原因：

• JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性；
• JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则称这个属性是可枚举的,否则反之。

知道了这些,我们就可以把属性的遍历分为四种情况：

注：示例代码中,我们要遍历的对象是浏览器中的window,环境为Chrome43.0.2357.134,代码运行在空白页面中的script标签里.没有Firebug或者其他调试工具的影响(会导入一些全局变量,console等)。

遍历可枚举的自身属性

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

(function () {
    var propertys = Object.keys(window); //获得对象上所有可枚举的“实例属性”
    console.log(propertys.length); //chrome为7 ["top", "location", "document", "window", "external", "chrome", "propertys"]
    console.log(window);
    console.log(propertys); //window,document,InstallTrigger,除了最后一个是火狐私有的属性,原来window对象只有两个可枚举的自身属性.window属性指向window对象自身,一般没什么用.
})();

遍历所有的自身属性

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

(function () {
    var propertys = Object.getOwnPropertyNames(window); //获得对象上所有的“实例属性”
    console.log(propertys.length); //chrome为571
    console.log(propertys.join("\n")); //Object,Function,eval等等
})();

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

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

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

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

这种遍历主要用在各种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);
    console.log(propertys.length); // chrome为719
    console.log(propertys.join("\n")); // toString等
})();