var obj = {
name: "Simon",
age: "20",
clothing: {
style: "simple",
hipster: false
}
}
for(var propt in obj){
console.log(propt + ': ' + obj[propt]);
}
Bagaimana variabel propt
mewakili sifat-sifat benda? It's tidak built-in metode atau properti. Mengapa tidak datang dengan setiap properti di objek?
Iterasi sifat yang membutuhkan tambahan ini hasOwnProperty
check:
for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
// do stuff
}
}
It's diperlukan karena objek's prototipe mengandung sifat tambahan untuk objek yang secara teknis merupakan bagian dari objek. Ini tambahan sifat-sifat yang diwariskan dari dasar kelas objek, tapi masih ada sifat obj
.
hasOwnProperty
hanya memeriksa untuk melihat jika ini adalah properti khusus untuk kelas ini, dan tidak satu yang diwarisi dari kelas dasar.
It's juga memungkinkan untuk panggilan hasOwnProperty
melalui objek itu sendiri:
if (obj.hasOwnProperty(prop)) {
// do stuff
}
Tapi 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
Yang's mengapa itu's lebih aman untuk panggilan melalui Objek.prototipe
sebagai gantinya:
var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo'); // true
Sebagai JavaScript 1.8.5 anda dapat menggunakan Objek.kunci-kunci(obj)
untuk mendapatkan sebuah Array dari sifat-sifat yang didefinisikan pada obyek itu sendiri (orang-orang yang kembali berlaku 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-loop.
Yang didukung pada browser ini:
Lihat Mozilla Developer Network Objek.kunci-kunci()'s reference untuk informasi lebih lanjut.
Gadis-gadis dan orang-orang kita di tahun 2019 dan kita tidak punya banyak waktu untuk mengetik... Jadi mari kita lakukan ini baru keren mewah ECMAScript 2016:
Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));
Di up-to-date implementasi dari ES, anda dapat menggunakan Objek.entri
:
for (const [key, value] of Object.entries(obj)) { }
atau
Object.entries(obj).forEach(([key, value]) => ...)
Jika anda hanya ingin iterate atas nilai-nilai, kemudian menggunakan Objek.nilai-nilai:
for (const value of Object.values(obj)) { }
atau
Object.values(obj).forEach(value => ...)
Jika lingkungan anda mendukung ES2017 maka saya akan merekomendasikan Objek.entri:
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`);
});
Seperti yang ditunjukkan dalam Mozillas Objek.entri() dokumentasi:
Objek.entri() method ini mengembalikan sebuah array dari objek yang diberikan's sendiri enumerable properti [key, value] pasangan, dalam urutan yang sama seperti yang yang disediakan oleh untuk...dalam loop (perbedaan adalah bahwa yang di loop menyebutkan sifat dalam prototipe jaringan).
Pada dasarnya dengan Objek.entri kita dapat melupakan berikut langkah tambahan yang diperlukan dengan yang lebih tua untuk...di loop:
// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
// do stuff
}
Dominik's jawaban yang sempurna, aku hanya memilih untuk melakukannya dengan cara itu, seperti's cleaner untuk membaca:
for (var property in object) {
if (!object.hasOwnProperty(property)) continue;
// Do stuff...
}
Jawaban atas sedikit mengganggu karena mereka don't menjelaskan apa yang anda lakukan dalam loop for setelah anda memastikan itu's sebuah objek: ANDA DON'T mengaksesnya secara LANGSUNG! Anda benar-benar hanya disampaikan KUNCI yang anda butuhkan untuk menerapkan 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 ECMA5 aman. Bahkan bekerja di lumpuh JS versi seperti Badak ;)
Untuk menambahkan ES2015's penggunaan Mencerminkan.ownKeys(obj)
dan juga iterasi sifat melalui sebuah iterator.
Misalnya:
let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };
dapat mengulangi alih oleh
// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));
Jika anda ingin iterate langsung di atas nilai-nilai dari kunci-kunci dari sebuah objek, anda dapat menentukan iterator
, seperti JavaScipts's default iterator untuk string, array, diketik array, Peta dan Mengatur.
JS akan mencoba untuk iterate melalui default iterator properti, yang harus diartikan sebagai Simbol.iterator
.
Jika anda ingin dapat iterate atas semua benda-benda yang anda dapat menambahkannya sebagai prototype dari Object:
Object.prototype[Symbol.iterator] = function*() {
for(p of Reflect.ownKeys(this)){ yield this[p]; }
}
Ini akan memungkinkan anda untuk iterate atas nilai-nilai dari suatu objek dengan untuk...loop, misalnya:
for(val of obj) { console.log('Value is:' + val ) }
Perhatian: Seperti menulis jawaban ini (juni 2018) semua browser yang lain, tapi IE, dukungan generator dan untuk...dari
iterasi melalui Simbol.iterator
Untuk...dalam lingkaran mewakili properti masing-masing objek karena itu adalah sama seperti untuk loop. Anda didefinisikan propt dalam untuk...di loop dengan melakukan:
for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}
Untuk...dalam lingkaran iterates melalui enumerable sifat dari sebuah objek. Mana variabel yang anda tentukan, atau dimasukkan ke dalam untuk...di loop, mengubah setiap kali ia pergi ke depan properti ini iterates. Variabel dalam untuk...di loop iterates melalui tombol, tetapi nilai itu adalah kunci's nilai. Misalnya:
for(var propt in obj) {
console.log(propt);//logs name
console.log(obj[propt]);//logs "Simon"
}
Anda dapat melihat bagaimana variabel yang berbeda dengan variabel's nilai. Sebaliknya, untuk...loop tidak sebaliknya.
Saya harap ini membantu.
Anda dapat menggunakan Lodash. Dokumentasi
var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
...
});
Saat ini anda dapat mengkonversi standar JS objek menjadi iterable objek hanya dengan menambahkan Simbol.iterator metode. Kemudian anda dapat menggunakan untuk
loop dan acceess nilai-nilai secara langsung atau bahkan dapat menggunakan menyebar operator pada objek juga. Keren. Let's melihat bagaimana kita dapat 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);
Anda untuk
loop iterasi semua properti dari objek obj
. propt
didefinisikan pada baris pertama anda untuk loop. Ini adalah sebuah string yang merupakan nama dari sebuah properti dari obj
objek. Pada iterasi pertama dari loop, propt
akan menjadi "".
Jenis-jenis cara untuk iterate objek dalam javascript
untuk...di loop
untuk...dari loop
forEach() metode
peta() metode
let obj = {
city1: 'BOM',
city2: 'BLR',
city3: 'HYD',
state: {
city1: 'Sub-city1',
city2: 'Sub-city2'
}
}
console.log('----------------using for...in loop------')
for(let entry in obj)
console.log(entry +" -> "+ obj[entry])
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key + " -> " + obj[key]);
}
}
console.log('----------------using for...of loop------')
for (const key of Object.keys(obj))
console.log(key +" -> "+ obj[key]);
for (const [key, value] of Object.entries(obj))
console.log(key +" -> "+ value);
console.log('----------------using forEach loop------')
Object.entries(obj).forEach(([key, value]) => console.log(key +" -> "+ value));
console.log('----------------using map function------')
Object.entries(obj).map(([k,v])=> console.log(k+' -> '+v))
Cara untuk iterate bersarang objek
let obj = {
city1: 'ALD',
city2: 'BLR',
city3: 'HYD',
state: {
city4: 'Sub-city1',
city5: 'Sub-city2'
}
}
function nestedObj(obj) {
for (let key in obj) {
// checking if it's nested to iterate again
if (obj.hasOwnProperty(key) &&
(typeof obj[key] === "object")) {
nestedObj(obj[key])
} else {
// showing the flat attributes
console.log(key + " -> " + obj[key]);
}
}
}
nestedObj(obj);
Sedangkan top-rated jawabannya adalah benar, berikut adalah alternatif menggunakan kasus saya.e jika anda iterasi objek dan ingin membuat sebuah array di akhir. Gunakan .peta
bukan forEach
const newObj = Object.keys(obj).map(el => {
//ell will hold keys
// Getting the value of the keys should be as simple as obj[el]
})