开发者问题收集

如何循环遍历以对象为成员的普通 JavaScript 对象

2009-05-28
2080925

如何循环遍历 JavaScript 对象中的所有成员,包括对象值?

例如,如何循环遍历这个(访问每个的“your_name”和“your_message”)?

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar"
    }
}
3个回答
for (var key in validation_messages) {
    // skip loop if the property is from prototype
    if (!validation_messages.hasOwnProperty(key)) continue;

    var obj = validation_messages[key];
    for (var prop in obj) {
        // skip loop if the property is from prototype
        if (!obj.hasOwnProperty(prop)) continue;

        // your code
        alert(prop + " = " + obj[prop]);
    }
}
AgileJon
2009-05-28

在 ECMAScript 5 下,你可以组合 Object.keys()Array.prototype.forEach()

var obj = {
  first: "John",
  last: "Doe"
};

//
//	Visit non-inherited enumerable keys
//
Object.keys(obj).forEach(function(key) {

  console.log(key, obj[key]);

});
Axel Rauschmayer
2011-04-20

ES6/2015 中,您可以像这样循环遍历对象(使用 箭头函数 ):

Object.keys(myObj).forEach(key => {
  console.log(key);        // the name of the current key.
  console.log(myObj[key]); // the value of the current key.
});

JS Bin

ES7/2016 中,您可以使用 Object.entries 代替 Object.keys 并循环遍历对象,例如这个:

Object.entries(myObj).forEach(([key, val]) => {
  console.log(key); // the name of the current key.
  console.log(val); // the value of the current key.
});

上面的代码也可以作为 单行 运行:

Object.entries(myObj).forEach(([key, val]) => console.log(key, val));

jsbin

如果您还想循环遍历嵌套对象,可以使用 递归 函数(ES6):

const loopNestedObj = obj => {
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === "object") loopNestedObj(obj[key]); // recurse.
    else console.log(key, obj[key]); // or do something with key and val.
  });
};

JS Bin

与上面的函数相同,但使用 ES7 Object.entries() 代替 Object.keys()

const loopNestedObj = obj => {
  Object.entries(obj).forEach(([key, val]) => {
    if (val && typeof val === "object") loopNestedObj(val); // recurse.
    else console.log(key, val); // or do something with key and val.
  });
};

在这里,我们循环遍历嵌套对象更改值并一次性返回一个新对象,使用 Object.entries() 结合 Object.fromEntries() ( ES10/2019 ):

const loopNestedObj = obj =>
  Object.fromEntries(
    Object.entries(obj).map(([key, val]) => {
      if (val && typeof val === "object") [key, loopNestedObj(val)]; // recurse
      else [key, updateMyVal(val)]; // or do something with key and val.
    })
  );

循环遍历对象的另一种方法是使用 for ... in for ... of 。请参阅 vdegenne 写得很好的答案

Rotareti
2017-01-09