JavaScript中对象的属性分为两种：数据属性和访问器属性。然后根据具体的上下文环境的不同，又可以将属性分为：原型属性和实例属性。原型属性是定义在对象的原型(prototype)中的属性，而实例属性一方面来自构造的函数中，然后就是构造函数实例化后添加的新属性。

在JavaScript中除了检测对象的属性是否存在，还会经常对对象的属性进行遍历(枚举)。而在JavaScript中遍历一个对象的属性并不太简单，主要有两个原因：

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

这篇文章将总结有关于JavaScript中对象属性枚举的几种方法：

• for ... in
• Object.keys()
• Object.getOwnPropertyNames()
• for ... of

for ... in

for...in循环可以遍历对象中所有可枚举的对象属性(包括对象自有属性和继承的属性)。不过需要注意的是，使用for...in循环遍历对象属性时返回的属性会因为各个浏览器不同导致对象属性遍历的顺序有可能不是当初构建时的顺序。

var obj = {
    'x': 1,
    'y': 2,
    'z': 3
}
obj.propertyIsEnumerable('toString'); // false,不可枚举

for (prop in obj) {
    console.log(prop); // 输出x,y,z；但不会输出toString
}

其实for...in操作的主要目的就是遍历对象的属性，如果只需要获取对象的实例属性(跳过继承属性)，可以使用hasOwnProperty()进行过滤：

for (prop in obj) {
    if (!obj.hasOwnProperty(prop)) continue; // 跳过继承属性
}

如此一来，可以这样来使用for...in循环遍历对象属性：

(function () {
    var getEnumPropertyNames = function (obj) {
        if (typeof obj !== 'object') throw TypeError(); // 参数必须是对象
        var props = []; // 将要返回的数组
        for (var prop in obj) { // 遍历所有可枚举的属性
            if (obj.hasOwnProperty(prop)) { //判断是否是自有属性
                props.push(prop); //将属性名添加到数组中
            }
        }
        return props; //返回这个数组
    }

    // 实例化
    var obj = {
       'x': 1,
       'y':2
    }
    obj.propertyIsEnumerable('toString')
    var propertys = getEnumPropertyNames(obj);
    console.log(propertys.length);       //2
    console.log(propertys.join(","));   //x,y
})()

Object.keys()

Object.keys()方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致。两者最大的区别在于for...in还会遍历出一个对象从其原型链上继承到的可枚举属性。

Object.keys() 返回一个所有元素为字符串的数组，其元素来自于从