Bagaimana properti ditetapkan ke objek dalam javascript?

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 }

Object { a: 1 }

Object { a: 1 }

Object { a: 1 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

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);

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

________14

// app.js

let obj = {};

console.log(obj);

for (var i = 0; i <= 5; i++) {
  obj['prop' + i] = i;
}
console.log(obj.prop4);

Object { a: 10, b: 20, c: 30 }

________14

// app.js

let obj = {};

console.log(obj);

for (var i = 0; i <= 5; i++) {
  obj['prop' + i] = i;
}
console.log(obj.prop4);

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

________14

// app.js

let obj = {};

console.log(obj);

for (var i = 0; i <= 5; i++) {
  obj['prop' + i] = i;
}
console.log(obj.prop4);

Object { a: 10, b: 20, c: 30 }

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 }

________14

// app.js

let obj = {};

console.log(obj);

for (var i = 0; i <= 5; i++) {
  obj['prop' + i] = i;
}
console.log(obj.prop4);

________14

// app.js

let obj = {};

console.log(obj);

for (var i = 0; i <= 5; i++) {
  obj['prop' + i] = i;
}
console.log(obj.prop4);

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 1 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

Object { a: 10, b: 20, c: 30 }

________14

// app.js

let obj = {};

console.log(obj);

for (var i = 0; i <= 5; i++) {
  obj['prop' + i] = i;
}
console.log(obj.prop4);

Object { a: 10, b: 20, c: 30 }

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

Bagaimana Anda mengatur properti suatu objek?

Bagaimana cara menetapkan nilai ke objek di js?