Dapatkah saya menambahkan variabel ke objek dalam javascript?

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

1. Nama properti statis. Penambahan properti "id" ke objek karyawan
2. Nama properti dinamis. Sertakan properti berdasarkan nilai variabel "customProp".
3. 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_value

Di 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

1. Nama properti adalah nilai statis dan perlu diinisialisasi secara manual
2. 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

1. Ketika nama properti didasarkan pada variabel dinamis. Misalnya, nama properti diambil dari panggilan API, masukan pengguna, dll
2. 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()

Kelas 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

Dalam 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

5. 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

Pada contoh di bawah ini, kami menambahkan properti “id” dengan nilai 670 ke objek karyawan menggunakan Object. menetapkan

Bisakah Anda menggunakan variabel dalam objek JavaScript?

Bagaimana cara menambahkan variabel sebagai properti di objek JavaScript?

Bagaimana Anda membuat variabel dalam suatu objek?

Bisakah Anda memodifikasi objek dalam JavaScript?