javascript - in原型 - getownpropertynames



如何通过一个普通的JavaScript对象与作为成员的对象进行循环? (12)

这个答案是在这篇文章中提供的一些性能反馈的解决方案的总和。 我认为有2个用例,OP没有提到他是否需要访问这些键以便在循环过程中使用它们。

I.钥匙需要被访问,

✔of和Object.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在内部初始化了很多变量来构建此过程(请参阅反馈以获取证明)。 除非你没有开发一个值得优化的巨大应用程序,否则它是可以的,但如果优化是你的首要任务,你应该考虑一下。

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

✔和Object.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.values情况,在Firefox中使用带有缓存变量的本地for循环似乎比使用for...of循环快一点。 然而,这种差异不是那么重要,因为Chrome运行速度超过了本地for循环,因此我建议在任何情况下(第4和第6次测试)处理Object.values时使用for...of

  • 在Firefox中, for...in循环非常慢,所以当我们想要在迭代期间缓存密钥时,最好使用Object.keys 。 Plus Chrome同时运行两种结构(第一次和最后一次测试)。

您可以在这里查看测试: https//jsperf.com/es7-and-misc-loops

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

Answer #1

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

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


Answer #2

使用_.each_.each

_.each(validation_messages, function(value, key){
    _.each(value, function(value, key){
        console.log(value);
    });
});

Answer #3

另外一个选择:

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

Answer #4

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

});


Answer #5

在ES7中,你可以这样做:

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

Answer #6

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

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
}

*/

Answer #7

我无法得到上面的帖子来完成我之后的工作。

在与其他答复一起播放后,我做了这个。 这是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

Answer #8

我认为值得指出的是,jQuery用$.each()很好地对此进行了排序。

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

例如:

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

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


Answer #9

这个问题

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

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

Answer #11
for(var key in validation_messages){
    for(var subkey in validation_messages[key]){
        //code here
        //subkey being value, key being 'yourname' / 'yourmsg'
    }
}




javascript