循环访问对象属性

javascript object loops

2022-08-29 21:51:13

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

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

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

答案 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

答案 2

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

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 循环更好（也更具可读性）。

它在以下浏览器上受支持：