遍历对象属性

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

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

变量propt如何表示对象的属性?它不是内置方法或属性。为什么它包含对象中的每个属性?

答案

遍历属性需要此附加的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

从 JavaScript 1.8.5 开始,您可以使用Object.keys(obj)获取在对象本身上定义的属性数组(为obj.hasOwnProperty(key)返回 true 的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 循环更好(更易读)。

这些浏览器支持它:

  • Firefox(壁虎):4(2.0)
  • 铬:5
  • Internet Explorer:9

有关更多信息,请参见Mozilla 开发人员网络Object.keys()的参考

我们现在处于 2019 年的男女生中,我们没有太多的时间来打字... 所以,让我们来做一下这个酷炫的新奇 ECMAScript 2016:

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

这是for...in statementMDNECMAScript 规范 )。

你可以把它读作 “ 每个属性obj对象,依次将各属性分配给PROPT变量”。

在 ES 的最新实现中,可以使用Object.entries

for (const [key, value] of Object.entries(obj)) { }

要么

Object.entries(obj).forEach(([key, value]) => ...)

如果只想遍历值,请使用 Object.values:

for (const value of Object.values(obj)) { }

要么

Object.values(obj).forEach(value => ...)

这只是for...in循环。查看Mozilla 上的文档

如果您的环境支持ES2017,那么我建议使用Object.entries

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

Mozillas Object.entries()文档所示:

Object.entries()方法返回给定对象自己的可枚举属性 [key,value] 对的数组,其顺序与 for ... in 循环所提供的顺序相同(区别在于 for-in 循环枚举原型链中的属性)。

基本上使用 Object.entries,我们可以放弃旧的for ... in循环所需的以下额外步骤:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

jQuery 允许您立即执行此操作:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Dominik 的答案很完美,我只喜欢那样做,因为它更容易阅读:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

上面的答案有点烦人,因为在您确定它是一个对象之后,它们并没有解释您在 for 循环内所做的事情:您不会直接访问它!实际上,您仅交付了需要应用于 OBJ 的密钥:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

这都是 ECMA5 安全的。甚至可以在像 Rhino 这样 the 脚的 JS 版本中工作;)