如何循环遍历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"
    }
}

当前回答

在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箱

在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箱

与上述函数相同,但使用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。。。为。。。属于看看vdegenne写得很好的答案。

其他回答

这个问题

for (var key in validation_messages) {
   var obj = validation_messages[key];
   for (var prop in obj) {
      alert(prop + " = " + obj[prop]);
   }
}

就是您还将循环遍历原始对象的原型。

有了这个,你可以避免:

for (var key in validation_messages) {
   if (validation_messages.hasOwnProperty(key)) {
      var obj = validation_messages[key];
      for (var prop in obj) {
         if (obj.hasOwnProperty(prop)) {
            alert(prop + " = " + obj[prop]);
         }
      }
   }
}

此答案是本报告中提供的解决方案的汇总发布一些绩效反馈。我想有两个用例和OP没有提到他是否需要访问密钥才能使用它们在循环过程中。

I.需要访问密钥

✔ of和Object.keys方法

let k;
for (k of Object.keys(obj)) {

    /*        k : key
     *   obj[k] : value
     */
}

✔ 进入方法

let k;
for (k in obj) {

    /*        k : key
     *   obj[k] : value
     */
}

小心使用这个,因为它可以打印obj的原型财产

✔ ES7方法

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

}

然而,在编辑时,我不推荐ES7方法,因为JavaScript在内部初始化了很多变量来构建这个过程(请参阅反馈以获取证据)。除非你不是在开发一个值得优化的大型应用程序,否则这是可以的,但如果优化是你的首要任务,你应该考虑一下。

二、我们只需要访问每个值

✔ of和Object.values方法

let v;
for (v of Object.values(obj)) {

}

关于测试的更多反馈:

缓存Object.keys或Object.values的性能可以忽略不计

例如,

const keys = Object.keys(obj);
let i;
for (i of keys) {
  //
}
// same as
for (i of Object.keys(obj)) {
  //
}

对于Object.values,在Firefox中使用带有缓存变量的本机For循环似乎比使用For循环快一点。。。循环的。然而,区别并不是那么重要,Chrome正在运行。。。比本机for循环快,所以我建议使用for。。。在任何情况下(第4次和第6次测试)处理Object.values时。在Firefox中。。。in循环非常慢,所以当我们想在迭代期间缓存密钥时,最好使用Object.keys。另外,Chrome正在以相同的速度运行这两个结构(第一次和最后一次测试)。

您可以在此处检查测试:https://jsperf.com/es7-and-misc-loops

异国情调的单深度穿越

JSON.stringify(validation_messages,(field,value)=>{
  if(!field) return value;

  // ... your code

  return value;
})

在这个解决方案中,我们使用了替换器,它允许深入遍历整个对象和嵌套对象-在每个级别上,您将获得所有字段和值。如果您需要获取每个字段的完整路径,请查看此处。

var验证消息={“key_1”:{“your_name”:“jimmy”,“your_msg”:“hello world”},“key_2”:{“your_name”:“billy”,“your_msg”:“foo等于bar”,“深”:{“颜色”:“红色”,“大小”:“10px”}}}JSON.stringify(validation_messages,(字段,值)=>{if(!field)返回值;console.log(`key:${field.padEnd(11)}-value:${value}`);返回值;})

一个月前刚刚完成的ECMAScript 2017引入了Object.values()。现在您可以这样做了:

let v;
for (v of Object.values(validation_messages))
   console.log(v.your_name);   // jimmy billy

每个2

(在此处找到):

var lunch = {
    sandwich: 'ham',
    age: 48,
};
lunch.forEach2(function (item, key) {
    console.log(key);
    console.log(item);
});

代码:

if (!Object.prototype.forEach2) {
    Object.defineProperty(Object.prototype, 'forEach2', {
        value: function (callback, thisArg) {
            if (this == null) {
                throw new TypeError('Not an object');
            }
            thisArg = thisArg || window;
            for (var key in this) {
                if (this.hasOwnProperty(key)) {
                    callback.call(thisArg, this[key], key, this);
                }
            }
        }
    });
}