ฉันจะเข้าถึงคุณสมบัติของวัตถุจาวาสคริปต์ได้อย่างไรหากฉันไม่รู้ชื่อ

สมมติว่าคุณมีวัตถุจาวาสคริปต์ดังนี้:

var data = { foo: 'bar', baz: 'quux' };

คุณสามารถเข้าถึงคุณสมบัติโดยใช้ชื่อคุณสมบัติ:

var foo = data.foo;
var baz = data["baz"];

แต่เป็นไปได้หรือไม่ที่จะได้รับค่าเหล่านี้หากคุณไม่ทราบชื่อคุณสมบัติ? ลักษณะที่ไม่เรียงลำดับของคุณสมบัติเหล่านี้ทำให้ไม่สามารถแยกออกจากกันได้หรือไม่?

ในกรณีของฉันฉันกำลังคิดถึงสถานการณ์ที่ฟังก์ชันต้องยอมรับชุดของคู่ชื่อ - ค่า แต่ชื่อของคุณสมบัติอาจเปลี่ยนไป

ความคิดของฉันเกี่ยวกับวิธีการทำสิ่งนี้คือการส่งชื่อคุณสมบัติไปยังฟังก์ชันพร้อมกับข้อมูล แต่มันให้ความรู้สึกเหมือนแฮ็ค ฉันอยากจะทำสิ่งนี้ด้วยการวิปัสสนาถ้าเป็นไปได้

คุณสามารถวนซ้ำปุ่มต่างๆดังนี้:

for (var key in data) {
  console.log(key);
}

บันทึก "ชื่อ" และ "ค่า"

หากคุณมีประเภทออบเจ็กต์ที่ซับซ้อนมากขึ้น (ไม่ใช่แค่วัตถุที่มีลักษณะคล้ายแฮชธรรมดาเหมือนในคำถามเดิม) คุณจะต้องวนซ้ำเฉพาะคีย์ที่เป็นของอ็อบเจ็กต์เท่านั้นซึ่งต่างจากคีย์บนต้นแบบของอ็อบเจ็กต์:

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    console.log(key);
  }
}

ตามที่คุณระบุไว้ไม่รับประกันว่าคีย์จะอยู่ในลำดับใด ๆ สังเกตว่าสิ่งนี้แตกต่างจากสิ่งต่อไปนี้อย่างไร:

for each (var value in data) {
  console.log(value);
}

ตัวอย่างนี้ loops ผ่านค่าจึงจะเข้าสู่ระบบและProperty Name 0หมายเหตุ: for eachไวยากรณ์ส่วนใหญ่รองรับเฉพาะใน Firefox แต่ไม่รองรับในเบราว์เซอร์อื่น

หากเบราว์เซอร์เป้าหมายของคุณรองรับ ES5 หรือไซต์ของคุณมีes5-shim.js(แนะนำ) คุณยังสามารถใช้Object.keys:

var data = { Name: 'Property Name', Value: '0' };
console.log(Object.keys(data)); // => ["Name", "Value"]

และวนซ้ำกับArray.prototype.forEach:

Object.keys(data).forEach(function (key) {
  console.log(data[key]);
});
// => Logs "Property Name", 0

JavaScript เวอร์ชันเก่า (<ES5) ต้องการการใช้for..inลูป:

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    // do something with key
  }
}

ES5 แนะนำObject.keysและArray # forEachซึ่งทำให้ง่ายขึ้นเล็กน้อย:

var data = { foo: 'bar', baz: 'quux' };

Object.keys(data); // ['foo', 'baz']
Object.keys(data).map(function(key){ return data[key] }) // ['bar', 'quux']
Object.keys(data).forEach(function (key) {
  // do something with data[key]
});

ES2017แนะนำObject.valuesและObject.entries.

Object.values(data) // ['bar', 'quux']
Object.entries(data) // [['foo', 'bar'], ['baz', 'quux']]

for(var property in data) {
    alert(property);
}

คุณมักจะต้องการตรวจสอบคุณสมบัติเฉพาะของอินสแตนซ์ของออบเจ็กต์โดยไม่มีวิธีการและคุณสมบัติต้นแบบที่ใช้ร่วมกันทั้งหมด:

 Obj.prototype.toString= function(){
        var A= [];
        for(var p in this){
            if(this.hasOwnProperty(p)){
                A[A.length]= p+'='+this[p];
            }
        }

    return A.join(', ');
}

function getDetailedObject(inputObject) {
    var detailedObject = {}, properties;

    do {
        properties = Object.getOwnPropertyNames( inputObject );
        for (var o in properties) {
            detailedObject[properties[o]] = inputObject[properties[o]];
        }
    } while ( inputObject = Object.getPrototypeOf( inputObject ) );

    return detailedObject;
}

สิ่งนี้จะได้รับคุณสมบัติและค่าทั้งหมด (สืบทอดหรือเป็นเจ้าของแจกแจงได้หรือไม่) ในออบเจ็กต์ใหม่ วัตถุดั้งเดิมไม่ถูกแตะต้อง ตอนนี้วัตถุใหม่สามารถข้ามผ่านได้โดยใช้

var obj = { 'b': '4' }; //example object
var detailedObject = getDetailedObject(obj);
for(var o in detailedObject) {
    console.log('key: ' + o + '   value: ' + detailedObject[o]);
}

var obj = {
 a: [1, 3, 4],
 b: 2,
 c: ['hi', 'there']
 }
for(let r in obj){  //for in loop iterates all properties in an object
 console.log(r) ;  //print all properties in sequence
 console.log(obj[r]);//print all properties values
}

คุณสามารถใช้Object.keys () "ซึ่งส่งคืนอาร์เรย์ของชื่อคุณสมบัติที่แจกแจงได้ของออบเจ็กต์ที่ระบุในลำดับเดียวกับที่เราได้รับจากการวนซ้ำปกติ"

คุณสามารถใช้วัตถุใด ๆ แทนstats:

var stats = {
  a: 3,
  b: 6,
  d: 7,
  erijgolekngo: 35
}
/*  this is the answer here  */
for (var key in Object.keys(stats)) {
  var t = Object.keys(stats)[key];
  console.log(t + " value =: " + stats[t]);
}

var attr, object_information='';

for(attr in object){

      //Get names and values of propertys with style (name : value)
      object_information += attr + ' : ' + object[attr] + '\n'; 

   }


alert(object_information); //Show all Object