Saya mencoba mengakses properti objek menggunakan nama dinamis. Apakah ini mungkin?
const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"
javascript
object
properties
RichW
sumber
sumber
Jawaban:
Ada dua cara untuk mengakses properti dari suatu objek:
something.bar
something['bar']
Nilai antara tanda kurung dapat berupa ekspresi apa pun. Oleh karena itu, jika nama properti disimpan dalam variabel, Anda harus menggunakan notasi braket:
sumber
Ini solusi saya:
Contoh penggunaan:
sumber
Dalam javascript kita dapat mengakses dengan:
foo.bar
foo[someVar]
ataufoo["string"]
Tetapi hanya case kedua yang memungkinkan untuk mengakses properti secara dinamis:
sumber
Berikut ini adalah contoh ES6 tentang bagaimana Anda dapat mengakses properti suatu objek menggunakan nama properti yang telah dihasilkan secara dinamis dengan menggabungkan dua string.
Ini disebut nama properti yang dihitung
sumber
Anda dapat mencapai ini dalam beberapa cara yang berbeda.
Notasi braket sangat kuat karena memungkinkan Anda mengakses properti berdasarkan variabel:
Ini dapat diperluas untuk mengulang setiap properti dari suatu objek. Ini bisa tampak berlebihan karena konstruksi JavaScript yang lebih baru seperti untuk ... dari ..., tetapi membantu mengilustrasikan kasus penggunaan:
Notasi titik dan braket juga berfungsi seperti yang diharapkan untuk objek bersarang:
Destrukturisasi objek
Kita juga dapat mempertimbangkan perusakan objek sebagai sarana untuk mengakses properti di suatu objek, tetapi sebagai berikut:
sumber
Anda bisa melakukannya seperti ini menggunakan Lodash get
sumber
DIPERBARUI
Saya telah mempertimbangkan komentar di bawah ini dan menyetujui. Eval harus dihindari.
Mengakses properti root pada objek mudah dicapai
obj[variable]
, tetapi bersarang menjadi hal yang rumit. Jangan menulis kode yang sudah ditulis saya sarankan untuk digunakanlodash.get
.Contoh
Lodash get dapat digunakan dengan berbagai cara, berikut ini tautan ke dokumentasi lodash.get
sumber
eval
bila memungkinkan. stackoverflow.com/questions/86513/…eval
untuk sesuatu yang sepele seperti mengakses properti adalah pekerjaan biasa-biasa saja dan hampir tidak dianjurkan dalam keadaan apa pun. Apa itu "masalah"?obj['nested']['test']
berfungsi dengan sangat baik dan tidak mengharuskan Anda untuk menanamkan kode dalam string.obj['nested']['value']
- ingat anak-anak, eval itu jahat!_.get
ke meja. Saya pikir jawaban ini pantas sekarang naik bukan turun turun. Ini mungkin berlebihan, tetapi ada baiknya untuk mengetahui bahwa itu ada.Kapan pun Anda perlu mengakses properti secara dinamis, Anda harus menggunakan braket persegi untuk mengakses properti bukan "." Sintaks operator
: objek [layak}
sumber
Saya menemukan sebuah kasus di mana saya pikir saya ingin meneruskan "alamat" properti objek sebagai data ke fungsi lain dan mengisi objek (dengan AJAX), melakukan pencarian dari array alamat, dan menampilkan dalam fungsi lainnya. Saya tidak bisa menggunakan notasi titik tanpa melakukan string akrobat, jadi saya pikir array mungkin lebih baik untuk dilewatkan. Saya akhirnya melakukan sesuatu yang berbeda, tetapi sepertinya terkait dengan posting ini.
Berikut ini contoh objek file bahasa seperti yang saya inginkan dari data:
Saya ingin dapat melewatkan array seperti: ["audioPlayer", "kontrol", "stop"] untuk mengakses teks bahasa, "stop" dalam kasus ini.
Saya membuat fungsi kecil ini yang mencari parameter alamat "paling tidak spesifik" (pertama), dan menugaskan kembali objek yang dikembalikan ke dirinya sendiri. Kemudian siap untuk mencari parameter alamat berikutnya yang paling spesifik jika ada.
pemakaian:
sumber
Menjadi menarik ketika Anda harus memberikan parameter ke fungsi ini juga.
Kode jsfiddle
sumber
ES5 // Periksa Variabel yang Sangat Bersarang
Sepotong kode sederhana ini dapat memeriksa keberadaan variabel / nilai yang sangat bersarang tanpa harus memeriksa setiap variabel di sepanjang jalan ...
Ex. - berbagai objek yang bersarang:
Dari pada :
Kita sekarang bisa:
Bersulang!
sumber
Function
sebagai gantinyaSaya mengajukan pertanyaan yang agak digandakan pada topik ini beberapa waktu lalu, dan setelah penelitian yang berlebihan, dan melihat banyak informasi yang hilang yang seharusnya ada di sini, saya merasa ada sesuatu yang berharga untuk ditambahkan ke pos lama ini.
namun saya jarang menggunakan rute ini karena tidak bekerja pada nilai properti yang ditetapkan melalui style-sheet. Untuk memberi Anda contoh, saya akan menunjukkan dengan sedikit kode semu.
Menggunakan contoh kode di atas; jika properti lebar elemen div yang disimpan dalam variabel 'elem' ditata dalam lembar gaya CSS, dan tidak ditata di dalam tag HTML-nya, Anda tanpa ragu akan mendapatkan nilai pengembalian dari undefined yang disimpan di dalam dari variabel cssProp. Nilai yang tidak ditentukan terjadi karena untuk mendapatkan nilai yang benar, kode yang ditulis dalam CSS Style-Sheet perlu dihitung untuk mendapatkan nilai, oleh karena itu; Anda harus menggunakan metode yang akan menghitung nilai properti yang nilainya terletak di dalam style-sheet.
W3Schools getComputedValue Doc Ini memberikan contoh yang baik, dan memungkinkan Anda bermain dengannya, namun, tautan ini Mozilla CSS getComputedValue doc berbicara tentang fungsi getComputedValue secara terperinci, dan harus dibaca oleh setiap calon pengembang yang tidak sepenuhnya mengerti tentang subjek ini.
... Apakah mendapatkan, dan tidak diatur. Ini yang saya gunakan, satu-satunya downside adalah Anda harus tahu JQuery, tapi ini jujur salah satu dari banyak alasan bagus bahwa setiap Pengembang Javascript harus belajar JQuery, itu hanya membuat hidup lebih mudah, dan menawarkan metode, seperti ini, yang tidak tersedia dengan Javascript standar. Semoga ini bisa membantu seseorang !!!
sumber
Bagi siapa pun yang ingin mengatur nilai variabel bersarang, berikut adalah cara melakukannya:
Dokumentasi: https://lodash.com/docs/4.17.15#set
Juga, dokumentasi jika Anda ingin mendapatkan nilai: https://lodash.com/docs/4.17.15# get
sumber
Anda harus menggunakan
JSON.parse
, lihat di https://www.w3schools.com/js/js_json_parse.aspsumber
sumber
foo
sudah menjadi string, jadi`${foo}`
persis sama denganfoo
. (Juga, kode Anda tampaknya memiliki beberapa garis miring terbalik tambahan yang tidak seharusnya ada di sana. Tapi itu tetap tidak ada gunanya bahkan jika Anda memperbaiki kesalahan sintaksis itu.)