Masalah umum yang dihadapi oleh pemrogram adalah mengulang kumpulan data yang dapat dihitung. Data ini bisa datang dalam bentuk array, daftar, peta atau objek lainnya. Pada artikel ini kita akan menangani masalah ini dan mempelajari 4 cara untuk mengulang objek menggunakan javascript untuk mengambil beberapa pasangan nilai kunci
Bagaimana cara mengulang objek dalam JavaScript?
Berbagai metode yang dapat digunakan untuk mengulang objek dalam JavaScript adalah
- Menggunakan untuk. dalam lingkaran
- Obyek. metode kunci
- Obyek. metode nilai
- Obyek. metode entri
Lanjutkan membaca untuk mempelajari lebih lanjut tentang berbagai metode
Daftar isi
- Pengantar nilai-nilai yang tidak terdefinisi dan nol dalam Javascript
- Metode untuk mengulang melalui objek menggunakan javascript
- Kata-kata perpisahan
Pengantar perulangan melalui objek menggunakan javascript
Jika Anda memiliki larik yang dianggap sebagai objek dalam javascript, Anda tidak dapat mengulang larik melalui peta[], forEach[], atau for. dari lingkaran
Anda akan mendapatkan kesalahan
const items = {
'first': new Date[],
'second': 2,
'third': 'test'
}
map[] akan memberi Anda TypeError. item. peta bukan fungsi
items.map[item => {}]
_forEach[] akan memberi Anda TypeError. item. forEach bukan fungsi
items.forEach[item => {}]
untuk. dari akan memberi Anda TypeError. item tidak dapat diubah
for [const item of items] {}
Metode untuk mengulang melalui objek menggunakan javascript
untuk. dalam lingkaran
Cara paling mudah untuk mengulang melalui properti objek adalah dengan menggunakan for. dalam pernyataan. Metode ini berfungsi di semua browser modern dan lama termasuk Internet Explorer 6 dan lebih tinggi
Berikut adalah contoh penggunaan for. dalam lingkaran untuk mengulang objek
const user = {
name: 'John Doe',
email: '[email protected]',
age: 25,
dob: '08/02/1989',
active: true
};
// iterate over the user object
for [const key in user] {
console.log[`${key}: ${user[key]}`];
}
// name: John Doe
// email: [email protected]
// age: 25
// dob: 08/02/1989
// active: true
_Satu masalah dalam menggunakan for. dalam metode adalah bahwa ia mengulang properti dalam rantai prototipe juga. Karena objek dalam JavaScript dapat mewarisi properti dari prototipenya, for. dalam pernyataan akan mengulang properti-properti itu juga
Untuk menghindari masalah ini, Anda harus secara eksplisit memeriksa apakah properti milik objek dengan menggunakan metode hasOwnProperty[]
for [const key in user] {
if [user.hasOwnProperty[key]] {
console.log[`${key}: ${user[key]}`];
}
}
Untuk mengatasi kerumitan ini, nanti di ES8 ditambahkan dua metode lain, Object. entri[] dan Objek. nilai[]. Metode-metode ini mengubah objek menjadi array dan kemudian menggunakan metode perulangan array untuk mengulang array itu
Obyek. kunci[] Metode
Sebelum ES6, satu-satunya cara untuk mengulang objek adalah dengan menggunakan for. dalam lingkaran. Objek. metode keys[] diperkenalkan di ES6 untuk mempermudah pengulangan objek
Dibutuhkan objek yang ingin Anda ulangi sebagai argumen dan mengembalikan array yang berisi semua nama properti [atau kunci]
Setelah itu Anda dapat menggunakan salah satu metode perulangan array, seperti forEach[], untuk melakukan iterasi melalui array dan mengambil nilai dari setiap properti
Ini sebuah contoh
const courses = {
java: 10,
javascript: 55,
nodejs: 5,
php: 15
};
// convert object to key's array
const keys = Object.keys[courses];
// print all keys
console.log[keys];
// [ 'java', 'javascript', 'nodejs', 'php' ]
// iterate over object
keys.forEach[[key, index] => {
console.log[`${key}: ${courses[key]}`];
}];
// java: 10
// javascript: 55
// nodejs: 5
// php: 15
_Obyek. nilai[] Metode
Objek. metode values[] diperkenalkan di ES8 dan bekerja berlawanan dengan Object. kunci[]. Ini mengembalikan nilai semua properti dalam objek sebagai array. Anda kemudian dapat mengulang melalui larik nilai dengan menggunakan salah satu metode pengulangan larik
Mari kita lihat sebuah contoh
>const animals = {
tiger: 1,
cat: 2,
monkey: 3,
elephant: 4
};
// iterate over object values
Object.values[animals].forEach[val => console.log[val]];
// 1
// 2
// 3
// 4
Obyek. entri[] Metode
Objek. entri[], metode ES8 lainnya dapat digunakan untuk melintasi array. . Obyek. entri[] menampilkan larik larik, dengan setiap larik dalam memiliki dua elemen. Elemen pertama adalah properti dan elemen kedua adalah nilai
Ini sebuah contoh
const animals = {
tiger: 1,
cat: 2,
monkey: 3,
elephant: 4
};
const entries = Object.entries[animals];
console.log[entries];
// [ [ 'tiger', 1 ],
// [ 'cat', 2 ],
// [ 'monkey', 3 ],
// [ 'elephant', 4 ] ]
_Untuk mengulang array yang dikembalikan oleh Object. entri[], Anda dapat menggunakan untuk. of loop atau metode forEach[] seperti yang ditunjukkan di bawah ini
// `for...of` loop
for [const [key, value] of Object.entries[animals]] {
console.log[`${key}: ${value}`];
}
// `forEach[]` method
Object.entries[animals].forEach[[[key, value]] => {
console.log[`${key}: ${value}`]
}];
_Kata-kata Perpisahan
Kami telah secara singkat melihat sekitar 4 cara berbeda untuk mengulang objek dalam javascript. Jika Anda menggunakan browser lama, untuk. in masih merupakan opsi yang bagus, jika tidak, Anda dapat menggunakan salah satu metode terbaru yang dibahas di atas