Iterasi melalui properti objek

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?

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

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.

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

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

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 => ...)

Itu hanya satu for...inlingkaran. Lihatlah dokumentasi di Mozilla .

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
}

jquery memungkinkan Anda untuk melakukan ini sekarang:

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

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

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

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

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

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.

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

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

// a
// 3
// 2

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

Anda bisa menggunakan Lodash. Dokumentasi

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

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

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

Anda harus menganggapnya objsebagai pengumpulan nilai utama.

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

Jika menjalankan Node, saya akan merekomendasikan:

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

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

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

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

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

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

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

            }

     }
}

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

Periksa tautan ini, ini akan membantu https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);