ฉันจะวนลูปผ่านสมาชิกทั้งหมดในวัตถุ 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"
    }
}

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 คุณสามารถรวม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]);

});

มีปัญหากับสิ่งนี้

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

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

ใช้Underscore.js ของ_.each :

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

หากคุณใช้การเรียกซ้ำคุณสามารถส่งคืนคุณสมบัติของวัตถุที่ระดับความลึกใด ๆ

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 กรณีการใช้งานและ 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 เริ่มต้นตัวแปรจำนวนมากภายในเพื่อสร้างขั้นตอนนี้ (ดูคำติชมเพื่อรับการพิสูจน์) หากคุณไม่ได้พัฒนาแอพขนาดใหญ่ที่สมควรได้รับการปรับให้เหมาะสมมันก็โอเค แต่ถ้าการเพิ่มประสิทธิภาพเป็นเรื่องสำคัญที่สุดคุณควรคิดถึงมัน

ครั้งที่สอง เราแค่ต้องเข้าถึงแต่ละค่า

✔ 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เช่นการใช้ Native forloop กับตัวแปรแคชใน Firefox น่าจะเร็วกว่าการใช้for...ofloop อย่างไรก็ตามความแตกต่างนั้นไม่สำคัญและ Chrome นั้นทำงานfor...ofได้เร็วกว่า native forloop ดังนั้นฉันขอแนะนำให้ใช้for...ofเมื่อต้องรับมือกับObject.valuesทุกกรณี (การทดสอบครั้งที่ 4 และครั้งที่ 6)

• ใน Firefox ที่ห่วงจริงๆช้าดังนั้นเมื่อเราต้องการที่จะแคชที่สำคัญในระหว่างการซ้ำมันจะดีกว่าที่จะใช้for...in Object.keysPlus Chrome กำลังเรียกใช้โครงสร้างทั้งสองที่ความเร็วเท่ากัน (ทดสอบครั้งที่ 1 และครั้งสุดท้าย)

คุณสามารถตรวจสอบการทดสอบได้ที่นี่: https://jsperf.com/es7-and-misc-loops

ฉันรู้ว่ามันช้าไปแล้ว แต่ฉันใช้เวลา 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]);
            }

        }

    }

}

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 คือค่า

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

หรือ

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

ใน ES7 คุณสามารถทำได้:

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

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

วิธีในการทำเช่นนั้น ...

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

ต่อไปนี้เป็นโซลูชัน AgileJon ( ตัวอย่าง ) ที่ได้รับการปรับปรุงและเรียกซ้ำ:

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

วิธีนี้ใช้ได้กับทุกความลึกที่แตกต่างกัน

ตัวเลือกอื่น:

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

ECMAScript-2017 เพิ่งสรุปเมื่อเดือนที่แล้วแนะนำ Object.values ​​() ดังนั้นตอนนี้คุณสามารถทำสิ่งนี้:

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

ฉันคิดว่ามันคุ้มค่าที่จะชี้ให้เห็นว่า jQuery จัดเรียงสิ่งนี้ด้วย $.each()เรียงลำดับออกมาอย่างนี้ด้วย

ดู: https://api.jquery.com/each/

ตัวอย่างเช่น:

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

$(this)เป็นรายการเดียวภายในวัตถุ สลับ$('.foo')เป็นตัวแปรหากคุณไม่ต้องการใช้เอ็นจินตัวเลือกของ jQuery

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

ในการวนลูปผ่านวัตถุ JavaScript เราสามารถใช้ forEach และเพื่อปรับโค้ดให้เหมาะสมเราสามารถใช้ฟังก์ชั่นลูกศร

ฉันไม่สามารถรับโพสต์ด้านบนเพื่อทำสิ่งที่ฉันเป็น

หลังจากเล่นกับคำตอบอื่น ๆ ที่นี่ฉันทำมัน มันแฮ็ค แต่มันใช้งานได้!

สำหรับวัตถุนี้:

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

วิธีแก้ปัญหาที่เหมาะกับฉันมีดังต่อไปนี้

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

หนึ่งที่แปลกใหม่ - การสำรวจลึก

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

  // ... your code

  return value;
})

ในการแก้ปัญหานี้เราใช้replacerซึ่งอนุญาตให้สำรวจทั้งวัตถุและวัตถุที่ซ้อนกันในระดับลึก - ในแต่ละระดับคุณจะได้รับฟิลด์และค่าทั้งหมด หากคุณต้องการเส้นทางแบบเต็มไปยังแต่ละฟิลด์ดูที่นี่

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar",
        "deep": {
          "color": "red",
          "size": "10px"
        }
    }
}

JSON.stringify(validation_messages,(field,value)=>{
  if(!field) return value;
  
  console.log(`key: ${field.padEnd(11)} - value: ${value}`);
  
  return value;
})

ในกรณีของฉัน (บนพื้นฐานของก่อนหน้านี้) เป็นไปได้จำนวนระดับใด ๆ

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"]