Bagaimana Anda menambahkan satu objek ke objek lain dalam javascript?

Ruang Lingkup Pasal

• Pada artikel ini, kita akan melihat berbagai cara menambahkan properti ke objek dalam JavaScript menggunakan berbagai metode dan contoh
• Kita juga akan melihat bagaimana kita dapat menambahkan properti baru secara dinamis ke objek JavaScript setelah dibuat

pengantar

Untuk memulainya, mari kita merevisi dan membahas konsep objek dan sifat-sifatnya secara singkat. Objek dalam JavaScript adalah kumpulan properti tidak terurut dan properti ini pada dasarnya adalah pasangan kunci-nilai yang menentukan karakteristik objek. Sama seperti variabel JavaScript, nama objek & propertinya peka terhadap huruf besar-kecil. Mari kita ambil contoh sebuah objek di JavaScript dimana kita akan mendefinisikan beberapa properti di dalamnya

//JavaScript object named car with some defined properties inside it
const car = {
  brand: 'BMW', //brand property of car object having 'BMW' as its assigned value
  year: 2010 //year property of car object having 2010 as its assigned value
};
Di sini, kami telah membuat objek bernama mobil dengan merek dan tahun sebagai propertinya dengan nilai yang ditetapkan. Sekarang, jika kita harus mengakses properti objek mobil ini, kita cukup menggunakan notasi titik atau notasi kurung siku
Perhatikan bahwa jika kami mencoba mengakses properti objek yang tidak ditetapkan, maka itu akan mengembalikan tidak terdefinisi dan (bukan nol)
//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_
Pernahkah Anda bertanya-tanya apakah mungkin menambahkan lebih banyak properti ke objek yang sudah ada yang telah dibuat? 
Ada banyak metode dan cara dimana kita dapat menambahkan properti ke objek yang ada di JavaScript dan kita akan membahas semuanya secara detail saat kita melanjutkan artikel ini.
Menggunakan notasi titik (. )
Menggunakan notasi tanda kurung siku [ ]
Menggunakan Objek. metode defineProperty()
Menggunakan Objek. menetapkan () metode
Menggunakan sintaks operator spread

Menggunakan Notasi Titik (. )

Salah satu cara paling sederhana untuk menambah, mengakses, atau mengubah properti objek yang ada di JavaScript adalah dengan menggunakan notasi titik

Sintaksis

object.new_property = new_value; //use of dot notation method in JavaScript
Di sini, objek menunjukkan nama objek yang ada, dan untuk menambahkan properti ke JavaScript objek, kami menggunakan operator titik. properti_baru pada dasarnya adalah kunci dan nilai_baru adalah nilai yang diberikan ke properti baru ini yang akan ditambahkan di dalam objek



Perhatikan bahwa notasi titik ini tidak akan berfungsi untuk kasus di mana nama kunci properti menyertakan karakter khusus seperti spasi, tanda hubung, angka, dll.
Contoh untuk Mendemonstrasikan penggunaan Dot Notation dalam JavaScript
Dalam kode contoh JavaScript di bawah ini, kami telah membuat objek bernama obj dengan beberapa properti awal yang ditentukan di dalamnya
Sekarang untuk mendemonstrasikan penggunaan notasi titik, kami menambahkan dua properti baru dengan nilai yang ditetapkan di dalam objek. obj. roll_no = 121 dan obj. secondName = 'Jain' dengan bantuan operator titik
Pada akhirnya, kami mencetak objek objek untuk memeriksa properti yang baru ditambahkan (pasangan kunci-nilai) di dalamnya
Perhatikan bahwa dengan bantuan operator titik, kita juga dapat mengubah properti objek yang ada. Contoh. obj. nama = 'Raja';
//Example code to demonstrate the use of the dot notation method in JavaScript
let obj = { //JavaScript object named obj with some define properties inside it
  name: 'Mayank',
  age: 20,
  major: 'Computer Science'
};
//Printing object named obj that has been created above with some properties inside it
console.log("Object just after its creation: ",obj); //prints properties of existing JavaScript object named obj before adding new properties in it

obj.roll_no = 121; //adding new property roll_no with assigned value as 121 using dot operator of JavaScript
obj.secondName = 'Jain'; //adding new property secondName with assigned value as 'Jain' using dot operator of JavaScript
obj.gender = 'Male'; //adding new property gender with assigned value as 'Male' using dot operator in JavaScript

console.log("Object after adding new properties using dot notation: ",obj); //prints object obj after adding new properties using dot notation method in JavaScript
Keluaran
Seperti yang dapat kita amati, properti baru telah ditambahkan secara dinamis menggunakan notasi titik
Object just after its creation:  { name: 'Mayank', age: 20, major: 'Computer Science' }
Object after adding new properties using dot notation:  { name: 'Mayank',
  age: 20,
  major: 'Computer Science',
  roll_no: 121,
  secondName: 'Jain',
  gender: 'Male' } 
_
Contoh 2
Perhatikan bahwa jika kami mencoba menggunakan karakter khusus atau angka numerik apa pun dalam nama properti sambil menambahkan menggunakan notasi titik, itu akan menghasilkan kesalahan sintaksis
obj.123name = 'Hello'; //Taking above example and adding property name '123name' with assigned value as 'Hello' 
console.log(obj); //results in Syntax error 
Keluaran



SyntaxError: Invalid or unexpected token
_

Menggunakan Notasi Kurung Kotak [ ]

Seperti yang telah kita bahas di atas, ada beberapa kelemahan saat bekerja dengan notasi titik dalam kasus di mana nama properti adalah pengidentifikasi variabel yang tidak valid (katakanlah semua digit, memiliki spasi, karakter khusus)

Untuk menangani kasus seperti itu, kita dapat membayangkan objek sebagai array asosiatif dan dapat menggunakan notasi kurung siku untuk menambahkan properti baru di dalam objek

Juga dalam kasus variabel dinamis di mana nama properti diambil dari input pengguna atau panggilan API, notasi tanda kurung siku ini lebih membantu daripada notasi titik dalam JavaScript

Sintaksis

object['new_property'] = new_value; //square brackets notation method
Di sini, objek menunjukkan nama objek yang ada, dan untuk menambahkan properti ke JavaScript objek, kami menggunakan notasi tanda kurung siku. properti_baru pada dasarnya adalah kunci dan nilai_baru adalah nilai yang diberikan ke properti baru ini yang akan ditambahkan di dalam objek
Contoh untuk Mendemonstrasikan Penggunaan Notasi Tanda Kurung Persegi dalam JavaScript
Dalam kode contoh JavaScript di bawah ini, kami awalnya membuat objek bernama obj dengan beberapa properti yang ditentukan. Jelasnya, seperti yang sudah kita ketahui sekarang bahwa dengan menggunakan notasi kurung siku juga, kita dapat mengakses, menambah bahkan memodifikasi properti yang ada
Untuk mulai dengan, kami memodifikasi properti yang ada dari object obj i. e, obj['negara bagian'] = 'Mumbai'. Kami kemudian membuat objek bersarang kosong (obj. kota = {}) di dalam obj. Kami juga dapat mengakses objek bersarang menggunakan notasi braket persegi seperti mengakses array 2D
Kami juga telah memamerkan penggunaan kombinasi operator titik dan tanda kurung siku untuk mengakses objek bersarang
//JavaScript example code to demonstrate the use of square bracket notation method
let obj = {
   name: 'India',
   state: 'Delhi'
}; //Object obj created with some defined properties inside it

obj['state'] = 'Mumbai'; //modifying already exisiting 'state' property of object obj
obj.city = {}; //nested JavaScript object
obj['city']['name'] = 'Navi Mumbai'; //accessing nested object with square bracket notation
obj.city['street'] = 12; //combination of both dot and square bracket notation

console.log(obj); //printing object obj
_
Keluaran. Seperti yang dapat kita amati bahwa objek obj telah ditampilkan di sini dengan properti 'status' yang dimodifikasi dan 'kota' objek bersarang yang baru ditambahkan dengan properti nama dan jalan
{ name: 'India',
  state: 'Mumbai',
  city: { name: 'Navi Mumbai', street: 12 } }
_
Contoh 2
Mengambil contoh lain untuk memahami keuntungan notasi tanda kurung siku, di sini kita memiliki objek JavaScript kosong dan untuk menambahkan properti di dalamnya, kita menjalankan for-loop



Nama properti adalah ekspresi yang harus dievaluasi pada setiap iterasi loop tergantung pada nilai 'i' (ketika i==1, obj['num1'] = 1;), jelas membantu dalam kasus nama properti dinamis
//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_0
Keluaran
//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_1

Menggunakan Objek. metode defineProperty()

Kelas objek JavaScript menyediakan metode defineProperty() dan dengan menggunakan ini, kita dapat memodifikasi objek yang ada atau menambahkan properti ke objek JavaScript

Metode ini mengembalikan objek yang dimodifikasi dan juga memungkinkan kita untuk mengontrol atau mengonfigurasi perilaku properti

Sintaksis

//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_2
Di sini, konfigurasi terdiri dari dua properti utama yang dapat kita atur secara manual. dapat dihitung dan ditulis
Jika dapat ditulisi disetel ke salah, itu berarti bahwa kita tidak dapat memodifikasi atau menetapkan nilai baru untuk properti objek tertentu ini sedangkan enumerable menunjukkan bahwa nilai tersebut harus diambil secara dinamis menggunakan for-loop atau input pengguna, dll. Mari kita pahami teori ini secara praktis dengan melihat contoh kode
Contoh untuk Mendemonstrasikan Penggunaan Metode defineProperty() dalam JavaScript
Dalam kode contoh JavaScript di bawah ini, kami awalnya mengambil objek kosong bernama obj. Untuk menambahkan properti di dalamnya, kami telah menggunakan Object. metode defineProperty() untuk menambahkan properti 'id' ke objek dan menyetel properti konfigurasinya - dapat ditulis sebagai 'false'
Selanjutnya, kami mencoba memodifikasi properti 'id' dari obj tetapi karena konfigurasi yang dapat ditulisi disetel ke false, tidak ada efek pada nilai objek 'id'
//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_3
Keluaran



//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_4

Menggunakan Objek. menetapkan () Metode

Ada cara lain yang menarik dimana kita dapat menambahkan properti ke objek JavaScript i. e, dengan menggunakan Objek. menetapkan () metode. Metode ini memungkinkan kita untuk menambahkan properti dari satu objek sumber ke objek target lainnya. Kita cukup mendefinisikan semua properti di dalam objek sumber yang perlu kita tambahkan ke objek target yang sudah ada

Perhatikan bahwa properti di dalam objek target akan ditimpa oleh properti objek sumber jika nama kunci yang sama ditemukan di kedua objek

Sintaksis

//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_5
Di sini, Objek. metode assign() JavaScript telah digunakan dan sumber & target menunjukkan bahwa properti dari objek sumber sekarang akan ditambahkan atau ditetapkan ke objek target juga
Contoh untuk Mendemonstrasikan Penggunaan Objek. metodeassign() dalam JavaScript
Dalam kode contoh JavaScript di bawah ini, kami memiliki dua objek siswa dan info dengan properti yang sudah ditentukan di dalamnya. Sekarang tugas kita adalah menambahkan properti dari objek info ke objek siswa dan untuk ini, kita dapat menggunakan Object. metodeassign() dengan mengirimkan siswa dan info sebagai parameter masing-masing
//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_6
Keluaran
//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_7

Menggunakan Operator Penyebaran (. )

Ada cara unik lain untuk menambahkan properti ke objek JavaScript dengan menggunakan operator spread. Menyebarkan operator (. ) membuat salinan dari objek yang ada dengan semua propertinya dan oleh karena itu, dengan menggunakan definisi properti sebaris, kita selanjutnya dapat menambahkan lebih banyak properti ke objek itu. Mari kita lihat sintaks untuk memahami ini dengan cara yang lebih baik

Sintaksis

//displaying JavaScript property using dot notation
console.log(car.brand); //BMW 

//displaying JavaScript property using bracket notation
console.log(car['year']); //2010

//trying to access unassigned JavaScript property of car object
console.log(car.name); //undefined
_8
Di Sini,. objek secara virtual membuat salinan properti objek yang ada, dan menggunakan definisi sebaris, kita dapat menambahkan lebih banyak properti (properti1, properti2. ) ke objek yang ada
Selain itu, operator spread memungkinkan kita menggabungkan properti dari dua objek menjadi objek baru

Perhatikan bahwa pendekatan menggunakan operator sebaran ini untuk menggabungkan dua objek untuk membentuk yang baru tidak menimpa properti objek yang ada jika kunci umum ditemukan di objek sumber dan target

Contoh untuk Mendemonstrasikan Penggunaan Metode Spread Operator di JavaScript

Dalam kode contoh JavaScript di bawah ini, kami memiliki objek bernama obj dengan properti yang sudah ditentukan di dalamnya. Kami sekarang akan memeriksa fungsionalitas operator spread yang dapat digunakan untuk menambahkan lebih banyak properti di dalam objek

Kami akan menggunakan operator sebaran pada objek objek dan menggunakan definisi sebaris, kami akan menambahkan beberapa properti lagi ('kebangsaan', 'jenis kelamin') di dalam objek. Untuk memeriksa objek yang dihasilkan, kami telah menampilkan nilai objek pada akhirnya

Bagaimana cara menambahkan satu objek ke objek lain di JavaScript?

Bagaimana cara menambahkan dua nilai objek dalam JavaScript?