Iterasi melalui properti objek


2040

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

Bagaimana variabel tersebut proptmewakili sifat-sifat objek? Ini bukan metode atau properti bawaan. Mengapa muncul dengan setiap properti di objek?


11
if (typeof(obj[propt]) === 'object') {/ * Lakukan lagi * /}
noob

13
Baiklah, maaf atas pertanyaan ini. Saya tahu apa itu loop, saya tidak bisa mendapatkan "perulangan melalui properti objek", yang saya pikir sudah dihapus sekarang. Juga, mereka merekomendasikan saya "JavaScript Langkah demi Langkah Edisi 2 - Steve Suehring di sekolah.
Rafay

242
Ini pertanyaan awal yang bagus. Saya menambahkan bahwa saya memiliki 15 tahun pengalaman profesional dengan bahasa lain dan saya membutuhkan jawaban ini. Saya akan menambahkan 2000 jika saya bisa.
Nathan C. Tresch

60
Gila, tetapi saya telah mengunjungi halaman ini setiap beberapa bulan selama bertahun-tahun untuk mempelajari kembali sintaksis tentang cara melakukan ini. Saya tidak repot-repot mengingat bagaimana melakukan ini ... Saya hanya ingat bahwa halaman ini selalu ada di sini pada SO.
HDave

14
Ini adalah halaman teraneh yang pernah saya lihat di StackOverflow. Jika Anda membaca pertanyaan dengan seksama, hanya satu jawaban yang bahkan mulai mencoba menjawab apa yang sebenarnya ditanyakan, dan skornya adalah -6. Jawaban skor tertinggi, yang diterima, tidak hanya tidak menjawab, tetapi juga salah.

Jawaban:


2426

Meratakan properti membutuhkan hasOwnPropertypemeriksaan tambahan ini :

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

Ini perlu karena prototipe objek berisi properti tambahan untuk objek yang secara teknis merupakan bagian dari objek. Properti tambahan ini diwarisi dari kelas objek dasar, tetapi masih properti obj.

hasOwnProperty cukup periksa untuk melihat apakah ini properti khusus untuk kelas ini, dan tidak ada yang diwarisi dari kelas dasar.


Dimungkinkan juga untuk memanggil hasOwnPropertyobjek itu sendiri:

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

Tetapi ini akan gagal jika objek memiliki bidang yang tidak terkait dengan nama yang sama:

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

Itu sebabnya lebih aman untuk menyebutnya Object.prototype:

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

21
@BT Menurut dokumentasi Mozilla : "Jika Anda hanya ingin mempertimbangkan properti yang melekat pada objek itu sendiri, dan bukan prototipenya, gunakan getOwnPropertyNames atau melakukan pemeriksaan hasOwnProperty (propertyIsEnumerable juga dapat digunakan)."
davidmdem

3
Apa gunanya menelepon object.hasOwnProperty()? Bukankah fakta yang propertymemiliki nilai apa pun menyiratkan bahwa itu ada di dalamnya object?
Alex S

6
Karena, Alex S, prototipe objek berisi properti tambahan untuk objek yang secara teknis merupakan bagian dari objek. Mereka diwarisi dari kelas objek dasar, tetapi mereka masih properti. hasOwnProperty cukup memeriksa untuk melihat apakah ini properti khusus untuk kelas ini, dan tidak ada yang diwarisi dari kelas dasar. Penjelasan yang bagus: brianflove.com/2013/09/05/5/javascripts-hasownproperty-method
Kyle Richter

87
Saya merasa bahwa saya harus menyebutkan, bahwa Object.keys (obj) sekarang solusi yang jauh lebih baik untuk mendapatkan kunci dari objek itu sendiri. Tautan ke dokumentasi Mozilla: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Kyle Richter

9
Satu informasi penting hilang. propertyadalah string di sini, seharusnya dipanggil propertyName. Jika tidak dapat menyebabkan kebingungan bagi pemula JS seperti saya, yaitu apa yang harus dilakukan di dalam if.
Neolisk

1136

Pada JavaScript 1.8.5 Anda dapat menggunakan Object.keys(obj)untuk mendapatkan Array properti yang didefinisikan pada objek itu sendiri (yang mengembalikan true untuk obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Ini lebih baik (dan lebih mudah dibaca) daripada menggunakan for-in loop.

Ini didukung pada browser ini:

  • Firefox (Gecko): 4 (2.0)
  • Chrome: 5
  • Internet Explorer: 9

Lihat referensi Mozilla Developer Network Object.keys () untuk informasi lebih lanjut.



3
Dan jika Anda memerlukan dukungan untuk browser lama, Anda dapat menggunakan polyfill
KyleMit

27
Dalam lingkungan yang mendukung konstruksi bahasa ini, metode ini memungkinkan Array.setiap disebut: Object.keys(myObject).forEach(function(key,index) { //key = the name of the object key //index = the ordinal position of the key within the object });
Todd Price

4
@ AJ_83 Tidak ada cara yang baik untuk keluar dari forEach (). Gunakan beberapa () dalam kasus ini, dan kembalikan benar untuk menghancurkan
Daniel Z.

11
mengapa ini lebih mudah dibaca daripada untuk-dalam? for candidate in candidateStatus... sepertinya bisa dibaca oleh saya
Jona

309

Cewek dan cowok kita di 2019 dan kita tidak punya banyak waktu untuk mengetik ... Jadi mari kita lakukan ini keren baru ECMAScript 2016:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

17
Apa bedanya dengan jawaban Danny R?
krillgar

27
Ini adalah oneliner dan menggunakan peta, bukan forEach. Dan juga satement console.log mungkin menarik bagi sebagian orang.
Frank Roth

Satly, itu tidak berfungsi ketika obj=window.performance.memory: - / Di mana seperti for inhalnya. yaituvar obj = window.performance.memory; for( key in obj ) console.log( 'key=' + key + ' val=' + obj[key] );
Michaelangel007

2
window.performance.memoryhanya didukung oleh chrome dan Object.keys(obj)mengembalikan array kosong. Ini tidak ada hubungannya dengan .map.
Frank Roth

Jika ada yang tidak ingin membuat struktur ulang single-liner ini untuk melakukan lebih dari satu hal sekaligus e, saya telah memposting intisari ini. Ini pada dasarnya sama seperti kebanyakan implementasi hash, dan menggunakan ( (key) => (value) )alih-alih { key => value }, tetapi jika Anda belum pernah berurusan dengan itu sebelumnya, ini dapat membantu Anda memvisualisasikannya dengan lebih baik: gist.github.com/the-nose-knows/9f06e745a56ff20519707433e28a4fa8
kayleeFrye_onDeck

216

Ini adalah for...in statement( MDN , spec ECMAScript ).

Anda dapat membacanya sebagai " UNTUK setiap properti DI yang objobjek, menetapkan setiap properti untuk propt variabel pada gilirannya".


1
Terima kasih banyak, saya mengerti sekarang. Aku membenturkan kepalaku, membaca buku dan Google.
Rafay

21
Setuju dengan @RightSaidFred, para inoperator dan forpernyataan tidak terlibat sama sekali, for-inpernyataan merupakan produksi tata bahasa sendiri: for ( LeftHandSideExpression in Expression ),for ( var VariableDeclarationNoIn in Expression )
CMS

2
Aneh jawaban ini memiliki begitu banyak suara, terutama karena komentar populer ini tampaknya bertentangan dengannya.
Doug Molineux

9
Mengapa ini ditandai sebagai jawabannya? Sangat mungkin yang paling tidak membantu di utas ini ..
computrius

3
Jawaban yang paling tidak membantu? Tergantung apa yang menurut Anda ditanyakan OP; ketika saya pertama kali membaca pertanyaan itu sepertinya bingung kebingungan tentang mekanisme dimana variabel dapat digunakan untuk memeriksa properti objek, dan yang jawaban ini menjelaskan dengan fasih (meskipun keliru 'untuk-dalam' meskipun). Pertanyaan "Mengapa itu muncul dengan setiap properti" Saya melihat bisa menyiratkan OP sedang mencari hasOwnProperty tetapi tidak mengetahuinya, tapi saya pikir itu lebih mungkin ini yang ingin diketahui OP, dan telah salah menerima yang benar jawaban untuk pertanyaan yang berbeda. :-)
Bumpy

157

Dalam implementasi ES terbaru, Anda dapat menggunakan Object.entries:

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

atau

Object.entries(obj).forEach(([key, value]) => ...)

Jika Anda hanya ingin mengulangi nilai-nilai tersebut, maka gunakan Object.values:

for (const value of Object.values(obj)) { }

atau

Object.values(obj).forEach(value => ...)

ini akan menjadi solusi terbaik (object.entries ...), tapi saya tidak bisa menggunakannya. Ketika Anda ingin melakukan ini berulang kali dan tidak dapat mendukungnya dalam kerangka kerja Anda, Anda dapat menggunakan polyfill pada halaman ini: developer.mozilla.org/nl/docs/Web/JavaScript/Reference/…
Mario

Saran ketiga sangat bagus jika Anda hanya nilai-nilai properti. Luar biasa!
Ginzburg


27

Jika lingkungan Anda mendukung ES2017 maka saya akan merekomendasikan Object.entries :

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

Seperti yang ditunjukkan dalam dokumentasi Mozillas Object.entries () :

Metode Object.entries () mengembalikan array dari pasangan properti enumerable milik sendiri [kunci, nilai], dalam urutan yang sama seperti yang disediakan oleh for ... in loop (perbedaannya adalah for-in loop enumerate properti dalam rantai prototipe juga).

Pada dasarnya dengan Object.entries kita bisa melupakan langkah tambahan berikut yang diperlukan dengan yang lebih lama untuk ... dalam lingkaran:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

22

jquery memungkinkan Anda untuk melakukan ini sekarang:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

1
$.each({foo:1, length:0, bar:2}, function(k,v){console.log(k,v)})$ .each tidak cocok untuk objek. Jika suatu objek kebetulan memiliki properti panjang dan nilainya kebetulan menjadi nol, seluruh objek diperlakukan seolah-olah itu adalah array kosong.
Bob Stein

Detail mengapa saya pikir ini adalah pendekatan yang mengundang bug .
Bob Stein

21

Jawaban Dominik sempurna, saya hanya suka melakukannya seperti itu, karena lebih bersih untuk dibaca:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

Seharusnya Objectdengan huruf besar, bukan?
Jonathan

18

Jawaban di atas agak menjengkelkan karena mereka tidak menjelaskan apa yang Anda lakukan di dalam for for loop setelah Anda memastikan itu objek: ANDA TIDAK MENGAKSES LANGSUNG! Anda sebenarnya hanya mengirimkan KUNCI yang perlu Anda terapkan ke OBJ:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Ini semua aman ECMA5. Bahkan bekerja di versi JS lumpuh seperti Badak;)


15

Untuk menambahkan penggunaan ES2015 Reflect.ownKeys(obj)dan juga mengulangi properti melalui iterator.

Sebagai contoh:

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

dapat diulangi oleh

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

Jika Anda ingin beralih langsung ke nilai-nilai kunci suatu objek, Anda dapat mendefinisikan iterator, seperti halnya iterator default JavaScipts untuk string, array, array yang diketik, Map dan Set.

JS akan mencoba untuk beralih melalui properti iterator default, yang harus didefinisikan sebagai Symbol.iterator.

Jika Anda ingin dapat mengulangi semua objek, Anda dapat menambahkannya sebagai prototipe Obyek:

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

Ini akan memungkinkan Anda untuk mengulangi nilai-nilai suatu objek dengan for ... of loop, misalnya:

for(val of obj) { console.log('Value is:' + val ) }

Perhatian : Saat menulis jawaban ini (Juni 2018) semua browser lain, kecuali IE, mendukung generator dan for...ofiterasi melaluiSymbol.iterator


Meskipun Anda tidak benar-benar menjawab pertanyaan OP, ini sangat membantu bagi saya, saya belum tahu tentang Reflect.
Michiel

15
if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj
// If there is no keys in obj, it will return empty array = []
// Then it will get it's length, if it has at least one element,
// it's bigger than 0 which evaluates to true and the bellow 
// code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

3
Hai, dapatkah Anda menambahkan lebih banyak informasi tentang jawaban Anda, hanya memberikan kode tidak membantu.
Nicolas

Hai @ Nicolas Saya telah menambahkan penjelasan baris demi baris ke kode. Beritahu saya jika masih belum jelas
Fouad Boukredine

Karena forEach melewatkan nilai-nilai kosong , saya pikir Anda bisa menghilangkan if dan lakukan saja Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));seperti jawaban Frank Roth.
Darkproduct

12

The for ... in loop mewakili setiap properti dalam suatu objek karena itu seperti for for loop. Anda menetapkan propt di dalam untuk ... dalam lingkaran dengan melakukan:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

A for ... in loop berulang melalui properti enumerable dari suatu objek. Variabel mana pun yang Anda tetapkan, atau masukkan dalam untuk ... dalam loop, berubah setiap kali ia pergi ke properti berikutnya yang diulanginya. Variabel dalam for ... in loop berulang melalui tombol, tetapi nilainya adalah nilai kunci. Sebagai contoh:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

Anda dapat melihat perbedaan variabel dari nilai variabel. Sebaliknya, for ... of loop melakukan yang sebaliknya.

Saya harap ini membantu.


11
let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2

1
Seperti disebutkan dalam komentar lain, forEachlebih tepat di sini, seperti mapyang dimaksudkan untuk mengembalikan array baru dengan hasil memanggil blok kode pada setiap iterasi. Tapi kami hanya tertarik pada efek samping dari setiap iterasi, bukan nilai balik, maka kami tidak membutuhkan array baru yang mapmemberi kami.
Danny

11
Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

10

Anda bisa menggunakan Lodash. Dokumentasi

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

10
Mengapa "jawaban" ini memiliki 10 upvotes? Benar-benar gagal menjawab pertanyaan. Saya mulai kehilangan kepercayaan pada kecerdasan pada pengembang JS rata-rata.
developerbmw

1
@developerbmw Saya mengerti bahwa menggunakan fitur ES6 lebih tepat, tapi saya sudah menjawab setahun yang lalu. Tolong, berbagi pemikiran Anda dengan kami ketika Anda punya waktu sebentar.
viktarpunko

1
Idenya adalah untuk lebih fokus pada metode asli, alih-alih menyarankan pengguna menambahkan perpustakaan 10.000 baris ke halaman mereka. Jangan salah paham, saya suka menggunakan Lodash tapi ada waktu dan tempat untuk itu dan bukan ini.

9

forLoop Anda mengulangi semua properti objek obj. proptdidefinisikan di baris pertama for for loop Anda. Ini adalah string yang merupakan nama properti objobjek. Pada iterasi pertama dari loop, proptakan menjadi "nama".


9

Objek dalam JavaScript adalah kumpulan properti dan oleh karena itu dapat dilingkarkan dalam untuk setiap pernyataan.

Anda harus menganggapnya objsebagai pengumpulan nilai utama.


! dengan perbedaan penting bahwa 'daftar properti' ini dapat memiliki nama sebagai kunci, sedangkan array JS normal hanya dapat memiliki angka sebagai kunci.
Qqwy

9

Saat ini Anda dapat mengonversi objek JS standar menjadi objek yang dapat diubah hanya dengan menambahkan metode Symbol.iterator. Kemudian Anda dapat menggunakan for ofloop dan mengakses nilainya secara langsung atau bahkan dapat menggunakan operator spread pada objek juga. Keren. Mari kita lihat bagaimana kita bisa membuatnya:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);


1
Cara menarik untuk melakukan itu. Terima kasih atas function*penemuannya!
Benj

5

Jika menjalankan Node, saya akan merekomendasikan:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

5

Sementara jawaban berperingkat teratas benar, berikut ini adalah kasus penggunaan alternatif yaitu jika Anda mengulangi objek dan ingin membuat array pada akhirnya. Gunakan .mapsebagai gantiforEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

4

Juga menambahkan cara rekursif:

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

Pemakaian:

iterate({ foo: "foo", bar: { foo: "foo"} }); 

1
@ faiz - lihat komentar saya, itu adalah perlindungan terhadap terjebak dalam loop tanpa akhir ketika Anda berulang kali berjalan melalui objek yang memiliki referensi siklik
Ondrej Svejdar

3

Untuk apa..di dalam loop adalah bahwa ia menciptakan variabel baru (var someVariable) dan kemudian menyimpan setiap properti dari objek yang diberikan dalam variabel baru ini (someVariable) satu per satu. Karenanya jika Anda menggunakan blok {}, Anda dapat mengulanginya. Perhatikan contoh berikut.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

Putuskan ini, mengingat kesederhanaannya. Dalam kasus penggunaan saya, saya perlu memeriksa semua atribut dalam objek untuk nilai-nilai cerdik-NaNs, nulls, tidak terdefinisi (mereka adalah titik pada grafik dan nilai-nilai ini mencegah grafik dari menggambar). Untuk mendapatkan nilai alih-alih nama, dalam loop Anda hanya perlu melakukannya obj[someVariable]. Mungkin alasannya begitu banyak diturunkan karena tidak rekursif. Jadi ini tidak akan menjadi solusi yang memadai jika Anda memiliki objek yang sangat terstruktur.
Katharine Osborne

@KatharineOsborne atau mungkin karena frasa berikut agak samar: "Karena itu, jika Anda menggunakan blok {}, Anda dapat mengulanginya." Kode mengatakan lebih dari sekadar teks.
bvdb

3

Di sini saya mengulangi setiap node dan membuat nama node yang bermakna. Jika Anda perhatikan, instanceOf Array dan instanceOf Object cukup banyak melakukan hal yang sama (dalam aplikasi saya, saya memberikan logika yang berbeda)

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

note - Saya terinspirasi oleh jawaban Ondrej Svejdar. Tetapi solusi ini memiliki kinerja yang lebih baik dan kurang ambigu


3

Anda pada dasarnya ingin mengulang setiap properti di objek.

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

obj(prop)<- TypeError: obj bukan fungsi
le_m

@le_m salahku. Saya harus tidak sengaja mengambil hasOwnPropertyatribut. Itu seharusnya bekerja sekarang.
HovyTech

2

Saya ingin menambahkan jawaban di atas, karena Anda mungkin memiliki niat berbeda dari Javascript. Objek JSON dan objek Javascript adalah hal yang berbeda, dan Anda mungkin ingin beralih melalui properti objek JSON menggunakan solusi yang diusulkan di atas, dan kemudian terkejut.

Misalkan Anda memiliki objek JSON seperti:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

Cara yang salah untuk beralih melalui 'propertinya':

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

Anda mungkin akan terkejut melihat konsol logging 0, 1, dll ketika iterasi melalui sifat-sifat prop1dan prop2dan prop3_1. Objek-objek itu adalah urutan, dan indeks urutan adalah properti dari objek itu dalam Javascript.

Cara yang lebih baik untuk mengulang secara berulang melalui properti objek JSON adalah dengan terlebih dahulu memeriksa apakah objek tersebut berurutan atau tidak:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

1

Untuk lebih mempersempit jawaban yang diterima, perlu dicatat bahwa jika Anda membuat instance objek dengan var object = Object.create(null)maka object.hasOwnProperty(property)akan memicu TypeError. Jadi untuk amannya, Anda harus menyebutnya dari prototipe seperti ini:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

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.