Melintasi array objek javascript

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

1. Menggunakan untuk. dalam lingkaran
2. Obyek. metode kunci
3. Obyek. metode nilai
4. 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

Bagaimana cara melintasi objek array dalam JavaScript?

Bagaimana Anda melintasi array elemen?

Bagaimana cara memfilter array objek dalam JavaScript?

Bagaimana cara mengakses semua objek dalam array JavaScript?