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


1598

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

Answers:


2112
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]);
    }
}

13
当您执行obj [prop]时,Internet Explorer不同意(叹息),说“对象不支持此属性或方法”。我还没有找到解决方案。
user999717 2011年

2
如果您认为JS对象不必要具有数字键,则@MildFuzz实际上很有意义。您不能只遍历一个对象。JS for in与传统的非常相似foreach
杰克·威尔逊

4
for ... in是一个很好的解决方案,但是如果在for()循环中使用诺言,则要小心,因为如果在循环中创建var,则不能在promise'then函数中使用它。您的var在循环中仅存在一次,因此它在每个then函数中都具有相同的值,甚至是最后一个值。如果您有此问题,请尝试“ Object.keys(obj).forEach”或下面的我的答案。
Biber

775

在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]);

});


34
+1可以简化代码,但显然效果不如令人惊讶。JSPerf-for in vs Object.keys
techiev2 2012年

6
使用这种方法要当心此错误:“ TypeError:在非对象上调用Object.keys”。for ... in ... hasOwnProperty据我所知,该模式可以在任何对象上调用(对象,数组,null,未定义,true,false,数字基元,对象)。
theazureshadow 2012年

2
请注意,IE7不支持此功能。
Paul D. Waite,2013年

3
@ techiev2这些测试永远无效。有关当前的性能状态,请参见我的最新更新:jsperf.com/objdir/20
OrganicPanda 2014年

4
@ techiev2:不是Object.keys()让它变慢,而是forEach()反复访问.length!如果使用的是经典for-loop相反,它几乎快两倍,for..in+ hasOwnProperty()在Firefox 33
CodeManX

384

这个问题

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]);
         }
      }
   }
}

46
简而言之:检查- 循环hasOwnProperty内部。forin
罗里·奥肯

59
请注意,仅当您的对象具有原型方法时才需要这样做。例如,如果要循环访问的对象只是一个JSON对象,则不需要进行此检查。
gitaarik 2013年

6
@rednaw为安全起见,我使用该检查,因为可以修改Object.prototype。没有理智的脚本会这样做,但是您无法控制由疯狂的浏览器扩展在页面中运行的脚本。浏览器扩展在您的页面上运行(在大多数浏览器上),它们可能导致奇怪的问题(例如,将window.setTimeout设置为null!)。
robocat 2014年

1
非常感谢
Blue Tram

328

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.
});

jsbin

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.
  });
};

jsbin

与上述功能相同,但使用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.
    })
  );

2
对于使用Object.entries示例的ES7,您需要将箭头函数参数[key,val]包装在括号中,例如:`Object.entries(myObj).forEach(([[key,val])=> {/ *语句* /}
Puiu

6
我认为添加Object.entries和Object.keys不会在原型上进行迭代这一事实很有用,这是它与for in构造之间的最大区别。
steviejay

非常感谢
Blue Tram


56

如果您使用递归,则可以返回任何深度的对象属性-

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(',\n')+'}';


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

*/

2
当心循环,就像在DOM节点上调用它一样。
theazureshadow 2012年

45

该答案是本文中提供的解决方案的汇总,并提供了一些性能反馈。我认为有2个用例,OP没有提及他是否需要访问密钥以在循环过程中使用它们。

一,需要访问密钥

ofObject.keys方法

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

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

in方法

let k;
for (k in obj) {

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

谨慎使用此功能,因为它可以打印原型的属性 obj

✔ES7方法

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

}

但是,在编辑时,我不建议使用ES7方法,因为JavaScript在内部初始化了很多变量以构建此过程(请参见反馈以获取证明)。除非您没有开发一个值得优化的大型应用程序,否则就可以,但是如果您将优化放在首位,则应该考虑一下。

二。我们只需要访问每个值,

ofObject.values方法

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

}

有关测试的更多反馈:

  • 缓存Object.keysObject.values性能可以忽略不计

例如,

const keys = Object.keys(obj);
let i;
for (i of keys) {
  //
}
// same as
for (i of Object.keys(obj)) {
  //
}
  • 例如Object.valuesfor在Firefox中使用带有缓存变量的本机循环似乎比使用for...of循环快一点。然而不同的是并不重要,并在Chrome运行for...of比本地快for循环,所以我会建议使用for...of与交易时Object.values在任何情况下(第4和第6测试)。

  • 在Firefox中,for...in循环确实很慢,因此当我们要在迭代过程中缓存密钥时,最好使用Object.keys。另外,Chrome浏览器以相同的速度运行这两种结构(第一次测试和最后一次测试)。

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


2
ES7示例在React Native上的魅力十足!
Ty Bailey

很好解释。谢谢
Alok Ranjan

30

我知道这已经很晚了,但是我花了2分钟来编写这个经过优化和改进的AgileJon答案:

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
你为什么要储存hasOwnPropertyowns,然后调用owns.call(obj, prop),而不是只调用obj.hasOwnProperty(prop)这个答案呢?
罗里·奥肯

14
因为obj可能已经hasOwnProperty在其自身上定义了功能,所以它将不使用中的功能Object.prototype。您可以for像这样在循环之前进行尝试,并且该循环obj.hasOwnProperty = function(){return false;}不会遍历任何属性。
Azder

4
@Azder为答案+1,如果我对Object.prototype.hasOwnProperty感兴趣,则为+1。我之前在下划线库的源代码中看到了这一点,但不知道为什么。
塞缪尔

29
for(var k in validation_messages) {
    var o = validation_messages[k];
    do_something_with(o.your_name);
    do_something_else_with(o.your_msg);
}

14

p是值

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

要么

Object.keys(p).forEach(key => { console.log(key, p[key]) })



7

很少有这样做的方法...

1) 2层...在循环中...

for (let key in validation_messages) {
   const vmKeys = validation_messages[key];
   for (let vmKey in vmKeys) {
      console.log(vmKey + vmKeys[vmKey]);
   }
}

2)使用Object.key

Object.keys(validation_messages).forEach(key => {
   const vmKeys = validation_messages[key];
   Object.keys(vmKeys).forEach(key => {
    console.log(vmKeys + vmKeys[key]);
   });
});

3)递归函数

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]);
    }
  }
}

并这样称呼:

recursiveObj(validation_messages);

5

这是AgileJon解决方案的改进和递归版本(demo):

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);

该解决方案适用于各种不同深度。


5

另外一个选项:

var testObj = {test: true, test1: false};
for(let x of Object.keys(testObj)){
    console.log(x);
}

我在Chrome 55.0中尝试了您的解决方案,但出现类型错误。您的答案看起来简洁明了,如果可以解决问题,那可能是更好的选择之一。我试图弄清楚它,但不了解您的解决方案。
TolMera

2
@TolMera固定。
dude 2013年

4

ECMAScript-2017(一个月前刚刚完成)引入了Object.values()。现在,您可以执行以下操作:

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

3

我认为值得指出的是jQuery很好地解决了这一问题$.each()

请参阅:https//api.jquery.com/each/

例如:

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

$(this)是对象中的单个项目。$('.foo')如果您不想使用jQuery的选择器引擎,请切换到变量。


3

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

要遍历JavaScript对象,我们可以使用forEach并使用箭头函数来优化代码


2

我无法获得以上职位来做我想做的事情。

在与其他答复一起玩耍之后,我做到了。这很hacky,但是行得通!

对于此对象:

var myObj = {
    pageURL    : "BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress"},
    passwordBox: {model:"password"    , selector:"#password"}
};

...此代码:

// Get every value in the object into a separate array item ...
function buildArray(p_MainObj, p_Name) {
    var variableList = [];
    var thisVar = "";
    var thisYes = false;
    for (var key in p_MainObj) {
       thisVar = p_Name + "." + key;
       thisYes = false;
       if (p_MainObj.hasOwnProperty(key)) {
          var obj = p_MainObj[key];
          for (var prop in obj) {
            var myregex = /^[0-9]*$/;
            if (myregex.exec(prop) != prop) {
                thisYes = true;
                variableList.push({item:thisVar + "." + prop,value:obj[prop]});
            }
          }
          if ( ! thisYes )
            variableList.push({item:thisVar,value:obj});
       }
    }
    return variableList;
}

// Get the object items into a simple array ...
var objectItems = buildArray(myObj, "myObj");

// Now use them / test them etc... as you need to!
for (var x=0; x < objectItems.length; ++x) {
    console.log(objectItems[x].item + " = " + objectItems[x].value);
}

...在控制台中产生:

myObj.pageURL = BLAH
myObj.emailBox.model = emailAddress
myObj.emailBox.selector = #emailAddress
myObj.passwordBox.model = password
myObj.passwordBox.selector = #password

0

适用于我的解决方案如下

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

0

异国一号-深度遍历

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

  // ... your code

  return value;
})

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


-6

就我而言(在前面的基础上)可以是任意数量的级别。

var myObj = {
    rrr: undefined,
    pageURL    : "BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress"},
    passwordBox: {model:"password"    , selector:"#password"},
    proba: {odin:{dva:"rr",trr:"tyuuu"}, od:{ff:5,ppa:{ooo:{lll:'lll'}},tyt:'12345'}}
};


function lookdeep(obj,p_Name,gg){
    var A=[], tem, wrem=[], dd=gg?wrem:A;
    for(var p in obj){
        var y1=gg?'':p_Name, y1=y1 + '.' + p;
        if(obj.hasOwnProperty(p)){
           var tem=obj[p];
           if(tem && typeof tem=='object'){
               a1=arguments.callee(tem,p_Name,true);
               if(a1 && typeof a1=='object'){for(i in a1){dd.push(y1 + a1[i])};}
            }
            else{
               dd.push(y1 + ':' + String(tem));
            }
        }
    };
    return dd
};


var s=lookdeep(myObj,'myObj',false);
for (var x=0; x < s.length; ++x) {
console.log(s[x]+'\n');}

结果:

["myObj.rrr:undefined",
"myObj.pageURL:BLAH",
"myObj.emailBox.model:emailAddress",
"myObj.emailBox.selector:#emailAddress",
"myObj.passwordBox.model:password",
"myObj.passwordBox.selector:#password",
"myObj.proba.odin.dva:rr",
"myObj.proba.odin.trr:tyuuu",
"myObj.proba.od.ff:5",
"myObj.proba.od.ppa.ooo.lll:lll",
"myObj.proba.od.tyt:12345"]
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.