Temukan objek dalam javascript objek bersarang
JavaScript luar biasa, kita semua sudah tahu itu. Tetapi beberapa hal dalam JavaScript benar-benar aneh dan membuat kita sering menggaruk-garuk kepala. Salah satunya adalah konfrontasi dengan kesalahan ini saat Anda mencoba mengakses objek bersarang, Show
Tidak dapat membaca properti 'foo' dari undefined Sering kali saat kita bekerja dengan JavaScript, kita akan berurusan dengan objek bersarang dan seringkali kita perlu mengakses nilai bersarang terdalam dengan aman Mari ambil objek bersarang ini sebagai contoh const user = { Untuk mengakses nama pengguna kami, kami akan menulis const name = user.personalInfo.name; _Ini mudah dan lurus ke depan Tapi, entah kenapa, jika info pribadi pengguna kita tidak tersedia, struktur objeknya akan seperti ini, const user = { Sekarang jika Anda mencoba mengakses nama, Anda akan dilempar Tidak dapat membaca properti 'nama' yang tidak terdefinisi const name = user.personalInfo.name; // Cannot read property 'name' of undefined Ini karena kami mencoba mengakses kunci Cara yang biasa digunakan oleh sebagian besar developer untuk menangani skenario ini adalah, const name = user && user.personalInfo ? user.personalInfo.name : null; _Tidak apa-apa jika struktur bersarang Anda sederhana, tetapi jika data Anda bersarang sedalam 5 atau 6 level, maka kode Anda akan terlihat sangat berantakan seperti ini, let city; Ada beberapa trik untuk mengatasi struktur objek yang berantakan ini Pola Akses Objek Bersarang Oliver SteeleIni adalah favorit pribadi saya karena membuat kode terlihat bersih dan sederhana. Saya memilih gaya ini dari stackoverflow beberapa waktu lalu dan cukup menarik setelah Anda memahami cara kerjanya const name = ((user || {}).personalInfo || {}).name; _Dengan notasi ini, Anda tidak akan pernah mengalami Tidak dapat membaca properti 'nama' yang tidak terdefinisi. Anda pada dasarnya memeriksa apakah pengguna ada, jika tidak, Anda membuat objek kosong dengan cepat. Dengan cara ini, kunci level selanjutnya akan selalu diakses dari objek yang ada atau objek kosong, tetapi tidak pernah dari undefined Sayangnya, Anda tidak dapat mengakses array bersarang dengan trik ini Akses Objek Bersarang Menggunakan Pengurangan ArrayMetode pengurangan array sangat kuat dan dapat digunakan untuk mengakses objek bersarang dengan aman const getNestedObject = (nestedObj, pathArr) => {Typy Jika menurut Anda metode di atas terlalu umum, maka Anda harus mencoba pustaka Typy yang telah saya tulis. Selain mengakses objek bersarang dengan aman, ia melakukan banyak hal yang lebih mengagumkan. 🎉 Ini tersedia sebagai paket npm — Typy Jika Anda menggunakan Typy, kode Anda akan terlihat seperti ini, import t from 'typy';const name = t(user, 'personalInfo.name').safeObject;_ Ada beberapa perpustakaan lain seperti Lodash dan Ramda yang bisa melakukan ini. Namun dalam proyek front-end yang ringan, terutama jika Anda hanya memerlukan satu atau dua metode dari lib tersebut, sebaiknya pilih lib ringan alternatif, atau lebih baik, tulis sendiri JavaScript memungkinkan Anda menyimpan data sebagai pasangan nilai kunci yang disebut objek JS. Strukturnya mirip dengan JSON dan bahkan mendukung nesting, yaitu menggunakan satu objek ke objek lainnya. Terkadang Anda mungkin perlu mendapatkan kunci dari objek di JavaScript. Pada artikel ini, kita akan belajar cara mendapatkan kunci objek bersarang di JavaScript Cara Mendapatkan Kunci Objek Bersarang di JavaScriptKatakanlah Anda memiliki objek bersarang berikut di JavaScript let data = [ { name: "Apple", id: 1, alt: [{ name: "fruit1", description: "tbd1" }] }, { name: "Banana", id: 2, alt: [{ name: "fruit2", description: "tbd2" }] }, { name: "Blueberry", id: 3, alt: [{ name: "fruit3", description: "tbd3" }] } ];_ Setiap objek JS mendukung fungsi keys() yang mengembalikan array kunci yang ada di level pertama objek. Ini sintaksnya let keys = Object.keys(yourObject); Anda dapat mengakses objek bersarang menggunakan indeks 0, 1, 2, dll. Jadi data[0]. alt[0] akan mengakses objek bersarang alt pertama. Sekarang Anda dapat memanggil fungsi keys() yang disebutkan di atas untuk mendapatkan daftar kuncinya Object.keys(data[0].alt[0]) Perintah di atas akan mengembalikan ['nama', 'deskripsi'] tidak harus dalam urutan yang sama Jika Anda ingin mendapatkan nilai kunci tertentu, Anda bisa langsung merujuknya menggunakan nama kuncinya. Berikut adalah perintah untuk mendapatkan nilai deskripsi dari objek bersarang pertama Bagaimana cara menemukan objek dari objek bersarang di JavaScript?JavaScript Temukan Jalur Kunci di Objek atau Larik Bersarang Dalam . Dapatkan Path ke Kunci Bersarang. Kode. const findPath = (ob, key) => { const path = []; . . Dapatkan Path ke Kunci Bersarang Dengan Nilai yang Diberikan. Dengan sedikit modifikasi, kita dapat membuat kode di atas membandingkan nilai yang diberikan untuk kunci tersebut Bagaimana Anda mengakses objek bersarang objek?Kita dapat mengakses properti bersarang dari suatu objek atau objek bersarang menggunakan notasi titik (. ) atau notasi braket [] . Properti bersarang dari suatu objek dapat diakses dengan kunci rantai atau nama properti dalam urutan urutan yang benar.
Bagaimana cara mengakses array objek bersarang di JavaScript?Nested Array di JavaScript didefinisikan sebagai Array (Array luar) di dalam larik lain (array dalam). Sebuah Array dapat memiliki satu atau lebih Array dalam. Larik bersarang ini (array dalam) berada di bawah cakupan larik luar artinya kita dapat mengakses elemen larik dalam ini berdasarkan nama objek larik luar .
Bagaimana cara mendapatkan nilai objek bersarang dinamis dalam JavaScript?Anda dapat mengakses properti objek bersarang secara dinamis di JavaScript menggunakan tanda kurung siku . Anda perlu menggunakan beberapa tanda kurung siku untuk objek bersarang. Saya memiliki objek bersarang dengan properti nama yang juga merupakan objek. Properti nama berisi dua properti bersarang. |