JavaScript中遍历对象的property的3种方法介绍

在JavaScript的世界里，遍历对象的属性是一项常见的任务。有三种主要的方法可以实现这个目标，每一种都有其独特的特性和使用场景。

我们可以使用for/in循环来遍历对象的属性。这种方法可以遍历对象自身的属性（Own Property）以及从原型链上继承下来的属性。只有那些可枚举的属性（enumerable）才会被遍历到。

第二种方法是使用Object.keys()函数。这个函数接受一个对象作为参数，并返回一个由该对象的所有可枚举属性名组成的数组。需要注意的是，Object.keys()只返回对象自身的可枚举属性，不包括从原型链上继承下来的属性。这个方法只在ECMAScript 5标准中有效。

第三种方法是使用Object.getOwnPropertyNames()函数。这个函数也接受一个对象作为参数，并返回一个由该对象的所有属性名（包括不可枚举的）组成的数组。与Object.keys()不同的是，Object.getOwnPropertyNames()会返回对象所有的自有属性，无论其是否可枚举。同样，这个方法也只在ECMAScript 5标准中有效。

为了更好地理解这些方法，我们可以想象一下如下的场景并成图展示：假设你有一个对象o，它有一些属性，然后你用Object.create()创建了一个新的对象a，并给a添加了一些新的属性。通过for/in循环，你可以遍历到a的所有属性，包括从o继承来的。而Object.keys()和Object.getOwnPropertyNames()则可以帮助你查看a自己的属性，不过Object.keys()只会显示可枚举的，而Object.getOwnPropertyNames()则会显示所有的属性，无论其是否可枚举。

接下来，我们通过一个简单的实验来演示这些方法的使用：

```javascript

var o = {x:1, y:2};

var a = Object.create(o);

a.z = 3;

// 使用for/in循环遍历a的属性

for(var p in a){

console.log(p); // 输出：z x y

}

// 使用Object.keys()查看a的自有属性（只显示可枚举的）

console.log(Object.keys(a)); // 输出：["z"]

// 使用Object.getOwnPropertyNames()查看a的所有自有属性（包括不可枚举的）

console.log(Object.getOwnPropertyNames(a)); // 输出：["z"]

```

在这个实验中，我们可以看到，虽然a从o继承了y和x两个属性，但使用Object.keys()和Object.getOwnPropertyNames()只能看到a自己的属性z。这是因为这些方法只返回对象自身的属性，而不包括从原型链上继承的属性。我们也注意到，这些方法在ECMAScript 5标准中有效。