如何使用对象作为成员循环一个普通的JavaScript对象？


How to loop through a plain JavaScript object with the objects as members?

我如何循环访问javascript对象中的所有成员，包括对象值。

例如，我如何通过这个循环(访问每个人的"你的名字"和"你的消息")？

1
2
3
4
5
6
7
8
9
10
var validation_messages = {
   "key_1": {
       "your_name":"jimmy",
       "your_msg":"hello world"
    },
   "key_2": {
       "your_name":"billy",
       "your_msg":"foo equals bar"
    }
}
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
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]);
    }
}
相关讨论

根据ECMAScript 5，你可以混合和Array.prototype.forEach()：Object.keys()

1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
  first:"John",
  last:"Doe"
};

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

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

});

相关讨论

在与这个问题

1
2
3
4
5
6
for (var key in validation_messages) {
   var obj = validation_messages[key];
   for (var prop in obj) {
      alert(prop +" =" + obj[prop]);
   }
}

那是你我照样环穿过原始对象的原型。

与这一个你会避免它：

1
2
3
4
5
6
7
8
9
10
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]);
         }
      }
   }
}
相关讨论

你可以通过在es6环像这样的对象：(用箭头的函数)

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

jsbin

在Object.entriesES7可以使用而不是通过对象Object.keys环像这样：

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

还将上述工作的一个班轮。

1
Object.keys(myObj).forEach(key => console.log(key, myObj[key]));

jsbin

在你想结婚的对象，通井循环嵌套，可以使用递归函数(es6)：

1
2
3
4
5
6
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.
  });
};

jsbin

在相同的功能，但与Object.keysES7 Object.entries代替：

1
2
3
4
5
6
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.keys/ Object.entries枚举对象，然后使用过程值，然后转换回reduce()到新的对象。

1
2
3
4
5
6
7
8
const loopNestedObj = (obj) =>
  Object.keys(obj)
    // Use .filter(), .map(), etc. if you need.
    .reduce((newObj, key) =>
      (obj[key] && typeof obj[key] === 'object') ?
        {...newObj, [key]: loopNestedObj(obj[key])} :  // recurse.
        {...newObj, [key]: obj[key]},                  // Define value.
      {});
相关讨论

利用_.eachunderscore.js’s：

1
2
3
4
5
_.each(validation_messages, function(value, key){
    _.each(value, function(value, key){
        console.log(value);
    });
});
相关讨论

如果你使用任何你可以返回任何对象属性的深度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function lookdeep(object){
    var collection= [], index= 0, next, item;
    for(item in object){
        if(object.hasOwnProperty(item)){
            next= object[item];
            if(typeof next== 'object' && next!= null){
                collection[index++]= item +
                ':{ '+ lookdeep(next).join(', ')+'}';
            }
            else collection[index++]= [item+':'+String(next)];
        }
    }
    return collection;
}

//example

var O={
    a:1, b:2, c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
};
var lookdeepSample= 'O={'+ lookdeep(O).join(',
')+'}';


/*  returned value: (String)
O={
    a:1,
    b:2,
    c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
}

*/
相关讨论

This answer is an aggregate of the solutions that were provided in this
post with some performance
feedbacks. I think there is 2
use-cases and the OP didn't mention if he needs to access the keys in order use them
during the loop process.

一、需要的是访问键。

？？？？？？？的方法和Object.keysof

1
2
3
4
5
6
7
let k;
for (k of Object.keys(obj)) {

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

？？？？？？？该方法in

1
2
3
4
5
6
7
let k;
for (k in obj) {

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

使用这一个，它可以与cautious打印样机的性能objD

？？？？？？？在ES7的方法

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

}

然而，在时间的编辑，我也不会推荐的方法initializes ES7，因为很多JavaScript变量构建这一程序式(见反馈被证明)。除非你是一个巨大的应用程序开发deserves优化，那么它是好的如果你要优化你的优先，一想起它。

②。我们只需要访问的每个值。

？？？？？？？的方法和Object.valuesof

1
2
3
4
let v;
for (v of Object.values(obj)) {

}

更多关于：的反馈试验

  • 或是negligible Object.keysObject.values缓存性能

例如，

1
2
3
4
5
6
7
8
9
const keys = Object.keys(obj);
let i;
for (i of keys) {
  //
}
// same as
for (i of Object.keys(obj)) {
  //
}

  • 在Object.values案例，利用本地缓存在Firefox和for回路变量似乎是以更快的for...of环比小。然而，重要的差异是不运行的速度比for...of和Chrome OS for本地环路，我会建议使用在任何时候Object.valuesfor...of处理案件(第4和第6试验)。

  • 在Firefox中，环的for...in真的慢，所以当我们要缓存的密钥，在迭代Object.keys更好的使用它。联合结构在两个浏览器运行速度(第一个和最后的测试等)。

You can check the tests here :
https://jsperf.com/es7-and-misc-loops

相关讨论

我知道它的晚了，但它是2分钟把我写这agilejon优化和改进版的答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var key, obj, prop, owns = Object.prototype.hasOwnProperty;

for (key in validation_messages ) {

    if (owns.call(validation_messages, key)) {

        obj = validation_messages[key];

        for (prop in obj ) {

            // using obj.hasOwnProperty might cause you headache if there is
            // obj.hasOwnProperty = function(){return false;}
            // but owns will always work
            if (owns.call(obj, prop)) {
                console.log(prop,"=", obj[prop]);
            }

        }

    }

}
相关讨论

1
2
3
4
5
for(var k in validation_messages) {
    var o = validation_messages[k];
    do_something_with(o.your_name);
    do_something_else_with(o.your_msg);
}

P值是

1
2
3
for (var key in p) {
  alert(key + ' => ' + p[key]);
}

或

1
Object.keys(p).forEach(key => { console.log(key, p[key]) })
1
2
3
4
5
6
for(var key in validation_messages){
    for(var subkey in validation_messages[key]){
        //code here
        //subkey being value, key being 'yourname' / 'yourmsg'
    }
}

在ES7的：你可以

1
2
3
for (const [key, value] of Object.entries(obj)) {
  //
}
相关讨论

Here comes the improved and recursive version of AgileJon's solution (demo):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function loopThrough(obj){
  for(var key in obj){
    // skip loop if the property is from prototype
    if(!obj.hasOwnProperty(key)) continue;

    if(typeof obj[key] !== 'object'){
      //your code
      console.log(key+" ="+obj[key]);
    } else {
      loopThrough(obj[key]);
    }
  }
}
loopThrough(validation_messages);

本厂所有设备的解决方案，不同的厚度。

另一个选项：

1
2
3
4
var testObj = {test: true, test1: false};
for(let x of Object.keys(testObj)){
    console.log(x);
}
相关讨论

我认为这是值得指责说："这个$.each()nicely与jQuery的。

国有企业：https：／／／／每api.jquery.com

例如：

1
2
3
$('.foo').each(function() {
    console.log($(this));
});

$(this)对象为单项目的内幕。$('.foo')可变交换)如果你不想使用jQuery的选择器引擎。

在ECMAScript的年月日，就finalized，object.values(介绍)。现在你可以这样操作：

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

1
2
3
4
5
var obj={
name:"SanD",
age:"27"
}
Object.keys(obj).forEach((key)=>console.log(key,obj[key]));

为了循环访问javascript对象，我们可以使用foreach，为了优化代码，我们可以使用arrow函数

我找不到一个更高的是后的我。

在与其他replies扮演在这里，我用这个。它是，但是，它的工作！

这个对象是：

1
2
3
4
5
6
7
8
9
var myObj = {
    pageURL    :"BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress
<hr><P>很少有办法做到这一点…</P><P>1)2层，用于…在循环中…</P>[cc lang="javascript"]for (let key in validation_messages) {
   const vmKeys = validation_messages[key];
   for (let vmKey in vmKeys) {
      console.log(vmKey + vmKeys[vmKey]);
   }
}

2)使用EDOCX1[0]

1
2
3
4
5
6
Object.keys(validation_messages).forEach(key => {
   const vmKeys = validation_messages[key];
   Object.keys(vmKeys).forEach(key => {
    console.log(vmKeys + vmKeys[key]);
   });
});

3)递归函数

1
2
3
4
5
6
7
8
9
10
11
const recursiveObj = obj => {
  for(let key in obj){
    if(!obj.hasOwnProperty(key)) continue;

    if(typeof obj[key] !== 'object'){
      console.log(key + obj[key]);
    } else {
      recursiveObj(obj[key]);
    }
  }
}

就像这样称呼它：

1
recursiveObj(validation_messages);

这是我的解决方案是以下工作

1
2
3
4
5
6
7
_private.convertParams=function(params){
    var params= [];
    Object.keys(values).forEach(function(key) {
        params.push({"id":key,"option":"Igual","value":params[key].id})
    });
    return params;
}

In my case (on the basis of the preceding) is possible any number of levels.

[cc lang="javascript"]var myObj = {
rrr: undefined,
pageURL :"BLAH",
emailBox : {model:"emailAddress", selector:"#emailAddress

相关讨论