Bagaimana cara mengakses properti objek javascript jika saya tidak tahu namanya?


124

Katakanlah Anda memiliki objek javascript seperti ini:

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

Anda dapat mengakses properti dengan nama properti:

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

Tetapi apakah mungkin untuk mendapatkan nilai-nilai ini jika Anda tidak mengetahui nama propertinya? Apakah sifat tidak teratur dari properti ini membuat tidak mungkin untuk membedakannya?

Dalam kasus saya, saya berpikir secara khusus tentang situasi di mana suatu fungsi perlu menerima serangkaian pasangan nama-nilai, tetapi nama properti dapat berubah.

Pemikiran saya tentang cara melakukan ini sejauh ini adalah meneruskan nama properti ke fungsi bersama dengan datanya, tetapi ini terasa seperti retasan. Saya lebih suka melakukan ini dengan introspeksi jika memungkinkan.

Jawaban:


144

Anda dapat memutar melalui kunci seperti ini:

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

Ini mencatat "Nama" dan "Nilai".

Jika Anda memiliki tipe objek yang lebih kompleks (bukan hanya objek seperti hash biasa, seperti pada pertanyaan awal), Anda hanya ingin mengulang melalui kunci yang dimiliki objek itu sendiri, sebagai lawan dari kunci pada prototipe objek :

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

Seperti yang Anda catat, kunci tidak dijamin akan berada dalam urutan tertentu. Perhatikan bagaimana ini berbeda dari yang berikut:

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

Contoh ini mengulang nilai, sehingga akan mencatat Property Namedan 0. NB: for eachSintaks ini sebagian besar hanya didukung di Firefox, tetapi tidak di browser lain.

Jika browser target Anda mendukung ES5, atau situs Anda menyertakan es5-shim.js(disarankan), Anda juga dapat menggunakan Object.keys:

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

dan loop dengan Array.prototype.forEach:

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

Apakah Anda baru saja membuat yang terakhir itu dan benar-benar lolos? Bagus ... =)
nickl-

Ini ada di Firefox ( dokumen ), tetapi hal ini tidak universal. Saya akan memperbarui jawaban untuk menyebutkan ini.
Ron DeVera

28
btw alert adalah cara yang buruk untuk men-debug sesuatu, coba console.log
StackOverflowed

Ini adalah jawaban terbaik saat pertanyaan diajukan, tetapi saya menghapus tanda centang karena versi JS yang lebih baru telah menyediakan alat yang lebih baik.
Adam Lassek

65

Versi lama JavaScript (<ES5) membutuhkan penggunaan for..inloop:

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

ES5 memperkenalkan Object.keys dan Array # forEach yang membuatnya sedikit lebih mudah:

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 memperkenalkan Object.valuesdan Object.entries.

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

1
Sekarang ini benar-benar menjawab pertanyaan, bagus sekali @Adam Lassek, dilakukan dengan sangat baik.
nickl-

Menyesatkan untuk menggunakan 'nama' dan 'nilai' sebagai kunci objek. Fungsi ini hanya mengembalikan kunci dalam daftar, bukan nilainya. {name1: 'value1', name2: 'value2'} akan menghindari kebingungan bagi pemula. Object.keys (data); // ['name1', 'name2']
James Nicholson

2
@JamesNicholson Saya setuju, diedit agar tidak terlalu membingungkan.
Adam Lassek


4

Anda sering kali ingin memeriksa properti tertentu dari sebuah objek, tanpa semua metode dan properti prototipe yang dibagikan:

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

    return A.join(', ');
}

3
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;
}

Ini akan mendapatkan semua properti dan nilainya (diwarisi atau dimiliki, dapat dihitung atau tidak) dalam objek baru. benda asli tidak tersentuh. Sekarang objek baru dapat dilintasi menggunakan

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

1
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
}

dimana jawaban ini memberikan apa yang dibutuhkan oleh OP tetapi sedikit gambaran tentang apa yang anda lakukan dan mengapa OP harus menggunakannya alangkah baiknya, juga jangan lupa .hasOwnProperty()ketika menggunakan for untuk melakukan iterasi suatu objek.
Muhammad Omer Aslam

Terima kasih, saya setuju bahwa .hasOwnProperty () iterasi objek tetapi iterasi untuk memeriksa kondisi namun menggunakannya kami tidak dapat mencetak semua properti objek. Koreksi saya jika salah.
Mayank_VK

Itu hasOwnProperty() kembali metode yang booleanmenunjukkan apakah objek memiliki properti tertentu sebagai milik sendiri (sebagai lawan mewarisi itu) . lihat contoh
Muhammad Omer Aslam

1

Anda bisa menggunakan Object.keys () , "yang mengembalikan larik dari nama properti enumerable objek tertentu, dalam urutan yang sama seperti yang kita dapatkan pada loop normal."

Anda dapat menggunakan objek apa pun sebagai pengganti 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]);
}


Bisakah Anda menambahkan lebih banyak penjelasan?
Keith Pinson

Object.keys( stats )[key]tidak masuk akal, akan selalu begitu undefined.
Adam Lassek

-2
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

Ini tidak menambah apa pun pada jawaban yang diterima, dan menyajikan informasi dengan cara yang paling tidak berguna. Dan itu tidak memperhitungkan properti yang diwariskan.
Adam Lassek
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.