Untuk mendemonstrasikan penambahan properti baru ke objek JavaScript, kami akan mempertimbangkan contoh berikut dari objek karyawan
var employee = { name: "Jone Doe", age: 35}Ada beberapa contoh yang perlu dipertimbangkan, yaitu sebagai berikut
- Nama properti statis. Penambahan properti "id" ke objek karyawan
- Nama properti dinamis. Sertakan properti berdasarkan nilai variabel "customProp".
- Menambahkan properti dari objek lain. Tambahkan properti lokasi dari objek orang ke objek karyawan
1. "obyek. properti_name” sintaks
Notasi titik adalah cara termudah untuk mengakses/memodifikasi properti objek JavaScript. Properti baru dapat diinisialisasi dengan sintaks berikut
object.new_property = new_value_Dalam contoh di bawah ini, kami membuat properti "id" dengan nilai 130 untuk objek karyawan
// Add new property employee.id = 130 // update existing property employee.age = 29 // Result: { id: 130, name: "Jone Doe", age: 29}Selanjutnya, menambahkan properti untuk objek bersarang mengikuti sintaks yang serupa
object.parent_prop.property = new_valueDi bawah ini, properti "negara" ditambahkan ke objek bersarang yang merupakan nilai properti induk "lokasi" di objek karyawan
employee.location = {} employee.location.country = "USA" // Result: { name: "Jone Doe", age: 35, location: { country: "USA" }}_Pendekatan ini paling ideal untuk contoh berikut
- Nama properti adalah nilai statis dan perlu diinisialisasi secara manual
- Nama properti tidak menyertakan karakter khusus seperti ruang ekstra, dll
2. Akses properti melalui "objek ['nama_properti']"
Sintaks berdasarkan tanda kurung siku adalah pendekatan alternatif dengan kemampuan serupa dan menghindari sebagian besar kelemahan operator titik. Sintaks untuk menambahkan properti baru menggunakan tanda kurung adalah sebagai berikut
object["property_name"] = property_value;Sintaks braket persegi menawarkan keuntungan berikut dibandingkan operator dot tradisional
- Ketika nama properti didasarkan pada variabel dinamis. Misalnya, nama properti diambil dari panggilan API, masukan pengguna, dll
- Nilai string nama properti berisi karakter khusus seperti ruang ekstra, dll
Pada contoh di bawah ini, properti “Nama belakang” tidak dapat langsung ditambahkan menggunakan sintaks operator dot karena adanya karakter spasi. Karenanya, kami dapat menyelesaikan pembuatan properti "Nama belakang" menggunakan sintaks tanda kurung siku
var custom_prop = "Last name" employee[custom_prop] = "Doe" // Result: { name: "Jone Doe", age: 35, Last name: "doe"}_Objek bersarang diakses menggunakan serangkaian sintaks kurung siku ganda atau sebagai alternatif, kombinasi operator titik dan kurung siku juga dapat digunakan
employee["location"] = {} // Access nested objects with square brackets employee["location"]["zip code"] = 1234 // Combine Dot operator with square brackets employee.location["zip code"] = 1324 // Result: { name: "Jone Doe", age: 35, location: { zip code: 1324 }}3. Buat properti baru menggunakan Object. tentukanProperti()
5 hal luar biasa yang dapat Anda lakukan
Harap aktifkan JavaScript
5 Hal luar biasa yang dapat Anda lakukan dengan JavascriptKelas Objek JavaScript juga menyediakan metode "defineProperty()" asli untuk mendefinisikan properti baru untuk suatu objek. Selain menentukan nilai properti baru, "defineProperty()" juga memungkinkan konfigurasi perilaku properti
Sintaks umum untuk "defineProperty()" adalah sebagai berikut
Object.defineProperty(obj, property, configuration)_Dalam contoh di bawah ini, kami mendefinisikan properti "id" untuk objek karyawan dengan nilai 130 dan dapat ditulis sebagai false. Oleh karena itu, perubahan selanjutnya dalam nilai properti id akan dibuang. Baca lebih lanjut tentang Objek. defineProperty dari pengembang. mozilla. org/Object/defineProperty.org/Object/defineProperty
Object.defineProperty(employee, 'id', { value: 130, writable: false }); // Discards changes in property value employee.id = 412; // Result: { id: 130, name: "Jone Doe", age: 29}_4. Sebarkan sintaks operator “{ …object, property_name. nilai properti }"
Operator spread memungkinkan pembuatan soft copy dari suatu objek dengan properti yang ada. Operator Spread yang diikuti dengan definisi properti inline memungkinkan penambahan properti baru. Selanjutnya, properti objek lain dapat ditambahkan dengan menggunakan operator spread beberapa kali
object.new_property = new_value_0Dalam contoh di bawah ini, kami membuat salinan objek karyawan yang digabungkan dengan properti location dan id. Baris berikutnya, objek “id” ditambahkan ke objek karyawan menggunakan operator spread
object.new_property = new_value_15. Tetapkan properti menggunakan Object. menetapkan()
“Objek. metode assign()” memungkinkan properti dari objek sumber ditambahkan ke objek target. Dengan mendefinisikan semua properti baru yang perlu ditambahkan ke objek sumber, kami mencapai penambahan properti ke objek target
object.new_property = new_value_2Pada contoh di bawah ini, kami menambahkan properti “id” dengan nilai 670 ke objek karyawan menggunakan Object. menetapkan