Anda bisa menambahkan properti dinamis ke objek setelah objek dibuat, dan mari kita lihat bagaimana kita bisa melakukannya
Untuk menambahkan properti, mengubah nilai properti, atau membaca nilai properti, gunakan sintaksis titik atau notasi tanda kurung siku
Sintaks titik
Untuk menambahkan properti baru di Objek Javascript, gunakan sintaks dot. Ini akan menambahkan properti ke Objek yang ada
Perhatikan contoh berikut Object literal
// app.js let obj = { name: 'Krunal', age: 27, education: 'Engineer' }; console.log(obj) obj.college = 'VVP'; console.log('After adding a property using dot syntax'); console.log(obj);Keluaran
{ name: 'Krunal', age: 27, education: 'Engineer' } After adding a property using dot syntax { name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }_Anda dapat melihat bahwa kami menambahkan properti baru bernama college menggunakan sintaks dot dan mencatat Object
Notasi Kurung Persegi untuk menambahkan properti di Objek JavaScript
Untuk menambahkan properti, gunakan notasi tanda kurung siku. Berikut ini menunjukkan sintaks braket persegi
obj['college'] = 'VVP';Lihat kode berikut
// app.js let obj = { name: 'Krunal', age: 27, education: 'Engineer' }; console.log(obj) obj['college'] = 'VVP'; console.log('After adding a property using square bracket syntax'); console.log(obj);Keluaran
{ name: 'Krunal', age: 27, education: 'Engineer' } After adding a property using square bracket syntax { name: 'Krunal', age: 27, education: 'Engineer', college: 'VVP' }_Sintaks braket persegi juga diperlukan ketika nama properti adalah variabel;
// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4);Keluaran
{} 4_Ekspresi dengan nama objek, titik, dan nama properti (obj. prop4) akan mengevaluasi nilai saat ini dari properti itu. Contoh kami pertama-tama menampilkan nilai di log konsol, lalu memberikan nilai ke variabel val
Sintaks kurung siku diperlukan jika nama properti berisi spasi atau karakter khusus lainnya atau menyertakan kata kunci yang dicadangkan dalam JavaScript. Jika tidak, kesalahan akan menjadi hasil Anda
Memodifikasi Properti Objek Javascript
Untuk memodifikasi properti JavaScript, kami akan menetapkan nilai baru ke properti yang ada, mencerminkannya di Objek utama
// app.js let obj = { name: 'Krunal', age: 27, education: 'Engineer' }; console.log(obj) obj['age'] = 26; obj['name'] = 'Ankit'; console.log('After modifying a property using square bracket'); console.log(obj);Keluaran
{ name: 'Krunal', age: 27, education: 'Engineer' } After modifying a property using square bracket { name: 'Ankit', age: 26, education: 'Engineer' }_Untuk mengubah nilai properti objek yang ada, tentukan nama objek diikuti dengan tanda kurung siku, nama properti yang ingin Anda ubah, tanda sama dengan, dan nilai baru yang ingin Anda tetapkan
Anda juga dapat menggunakan sintaks titik untuk menambahkan nilai baru ke properti yang sudah ada atau mengubah nilai properti yang sudah ada
Kesimpulan
Anda dapat menambahkan properti sebanyak yang Anda suka di JavaScript hanya dengan menggunakan notasi titik atau sintaks kurung siku
Objek. metode assign() digunakan untuk menyalin nilai dan properti dari satu atau lebih objek sumber ke objek target. Itu memanggil getter dan setter karena menggunakan [[Get]] pada sumber dan [[Set]] pada target. Ini mengembalikan objek target yang memiliki properti dan nilai yang disalin dari objek sumber. Obyek. assign() tidak menggunakan nilai sumber nol atau tidak terdefinisi.
Sintaksis
Object.assign(target, ...sources)_Parameter.
- target. Ini adalah objek target yang nilai dan propertinya harus disalin
- sumber. Ini adalah objek sumber dari mana nilai dan properti harus disalin
Nilai Pengembalian. Obyek. assign() mengembalikan objek target
Contoh fungsi di atas disediakan di bawah ini
Contoh 1. Di sini, dalam contoh ini, properti objek "obj1" i. e. { sebuah. 10 } disalin ke objek target “new_obj”
Javascript
<script>
// creating an object constructor and assigning values to it
const obj1 = { a: 1 };
Object { a: 1 }1
Object { a: 1 }3
Object { a: 1 }5
Object { a: 1 }7
Object { a: 10, b: 20, c: 30 }0
Object { a: 10, b: 20, c: 30 }2
Object { a: 10, b: 20, c: 30 }_3
Keluaran.
Object { a: 1 }Contoh 2. Di sini, dalam contoh ini properti dari tiga objek sumber "obj1, obj2, obj3" disalin ke objek target "new_obj". Nilai pasangan kunci-nilai yang sudah ada sebelumnya yang ada di objek sebelumnya akan ditimpa. Misalnya, obj1. b yang memiliki nilai 10 sekarang akan ditimpa dengan obj2. b yang bernilai 20
Javascript
<script>
________14// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4); _14_______6
Object { a: 10, b: 20, c: 30 }5Object { a: 10, b: 20, c: 30 }8 Object { a: 10, b: 20, c: 30 }9
Object { a: 10, b: 20, c: 30 }5Object { a: 10, b: 20, c: 30 }8 Object { a: 10, b: 20, c: 30 }2
Object { a: 10, b: 20, c: 30 }5Object { a: 10, b: 20, c: 30 }8 Object { a: 10, b: 20, c: 30 }5
Object { a: 10, b: 20, c: 30 }_6
________14// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4); _14_______8
Object { a: 10, b: 20, c: 30 }5<script>0
________14// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4); _14_______8 <script>3
Object { a: 10, b: 20, c: 30 }_6
Object { a: 10, b: 20, c: 30 }5<script>6
________14// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4); _14_______2
Object { a: 10, b: 20, c: 30 }_3
Keluaran.
Object { a: 10, b: 20, c: 30 }Contoh 3. Di sini, dalam contoh ini properti dari tiga objek sumber "obj1, obj2, obj3" disalin ke objek target "new_obj" dan objek target mendapatkan nilai yang ditimpa
Javascript
<script>
Object { a: 10, b: 20, c: 30 }5 2
________14// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4); _14_______8 5
________14// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4); _14_______8 8
Object { a: 10, b: 20, c: 30 }5Object { a: 10, b: 20, c: 30 }8 Object { a: 10, b: 20, c: 30 }5
Object { a: 10, b: 20, c: 30 }_6
Object { a: 10, b: 20, c: 30 }6// creating an object constructor and assigning values to it4
Object { a: 10, b: 20, c: 30 }6Object { a: 1 }3
Object { a: 10, b: 20, c: 30 }6Object { a: 10, b: 20, c: 30 }8 <script>3
Object { a: 10, b: 20, c: 30 }_6
Object { a: 10, b: 20, c: 30 }5<script>6
________14// app.js let obj = {}; console.log(obj); for (var i = 0; i <= 5; i++) { obj['prop' + i] = i; } console.log(obj.prop4); _14_______2
Object { a: 10, b: 20, c: 30 }_3
Keluaran.
Object { a: 10, b: 20, c: 30 }Penjelasan. Pada kode di atas properti ditimpa oleh objek lain yang memiliki properti yang sama kemudian dengan urutan parameter yang sama
Aplikasi.
- Obyek. assign() digunakan untuk mengkloning objek, untuk menggabungkan objek dengan properti yang sama
Kesalahan dan Pengecualian
- TypeError dimunculkan jika properti tidak dapat ditulis
- Objek target dapat diubah hanya jika properti ditambahkan sebelum kesalahan dimunculkan
- Obyek. assign() tidak menggunakan nilai sumber nol atau tidak terdefinisi
Kami memiliki daftar lengkap metode Objek Javascript, untuk memeriksanya silakan baca artikel Referensi Lengkap Objek JavaScript ini