遍历对象属性

Question

​

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

​

变量propt如何表示对象的属性？它不是一个内置的方法或属性。为什么它会出现对象中的每个属性？

Answer 1

迭代属性需要这个额外的hasOwnProperty检查：

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

这是必要的，因为对象的原型包含对象的附加属性，从技术上讲，这些属性是对象的一部分。这些附加特性继承自基本对象类，但仍然是obj的特性。

hasOwnProperty只是检查这是否是特定于该类的属性，而不是从基类继承的属性。

也可以通过对象本身调用hasOwnProperty：

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

但如果对象具有同名的不相关字段，则此操作将失败：

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

这就是为什么通过Object.prototype调用它更安全的原因：

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

Answer 2

从JavaScript 1.8.5开始，您可以使用Object.keys(obj)获取在对象本身上定义的属性数组(为obj.hasOwnProperty(key)返回true的属性)。

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

这比使用for-in循环更好(也更具可读性)。

在以下浏览器上受支持：

• 火狐(壁虎)：4 (2.0)
• Chrome: 5
• 2.0浏览器: 9

有关更多信息，请参阅the Mozilla Developer Network 's reference。

Answer 3

女孩们，男孩们，我们在2019年，我们没有那么多时间打字……所以，让我们来看看这款酷炫的新款ECMAScript 2016吧：

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));