Ringkasan. dalam tutorial ini, Anda akan mempelajari cara menggabungkan dua atau lebih objek JavaScript dan membuat objek baru yang menggabungkan properti dari semua objek
Untuk menggabungkan objek menjadi objek baru yang memiliki semua properti dari objek yang digabungkan, Anda memiliki dua opsi
- Gunakan operator sebaran (
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)0) - Gunakan metode
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)_1
Menggabungkan objek menggunakan operator sebar (
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)0)ES6 memperkenalkan operator penyebaran (
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)_0) yang dapat digunakan untuk menggabungkan dua atau lebih objek dan membuat objek baru yang memiliki properti dari objek yang digabungkanContoh berikut menggunakan operator spread (
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)_0) untuk menggabungkan objek{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)5 dan{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)6 ke objek{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)7let person = { firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356' }; let job = { jobTitle: 'JavaScript Developer', location: 'USA' }; let employee = { ...person, ...job }; console.log(employee);
Keluaran
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)Jika objek memiliki properti dengan nama yang sama, maka properti objek paling kanan akan menimpa properti sebelumnya. Sebagai contoh
let job = { jobTitle: 'JavaScript Developer', country: 'USA' }; let location = { city: 'London', country: 'England' }; let remoteJob = { ...job, ...location }; console.log(remoteJob);
Code language: JavaScript (javascript)Keluaran
{ jobTitle: 'JavaScript Developer', country: 'England', city: 'London' }
Code language: CSS (css)Dalam contoh ini,
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)6 dan{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)9 memiliki properti yang samalet job = { jobTitle: 'JavaScript Developer', country: 'USA' }; let location = { city: 'London', country: 'England' }; let remoteJob = { ...job, ...location }; console.log(remoteJob);
Code language: JavaScript (javascript)0. Saat kita menggabungkan objek-objek ini, objek hasil (let job = { jobTitle: 'JavaScript Developer', country: 'USA' }; let location = { city: 'London', country: 'England' }; let remoteJob = { ...job, ...location }; console.log(remoteJob);
Code language: JavaScript (javascript)1) memiliki propertilet job = { jobTitle: 'JavaScript Developer', country: 'USA' }; let location = { city: 'London', country: 'England' }; let remoteJob = { ...job, ...location }; console.log(remoteJob);
Code language: JavaScript (javascript)0 dengan nilai dari objek kedua ({ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)9)Menggabungkan objek menggunakan metode
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)1Metode
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)1 memungkinkan Anda menyalin semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target, dan mengembalikan objek targetObject.assign(target, sourceObj1, sourceObj2, ...);
Code language: JavaScript (javascript)Mirip dengan operator sebar (
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)_0), jika objek sumber memiliki nama properti yang sama, objek selanjutnya akan menimpa objek sebelumnya. Lihat contoh berikutlet person = { firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356' }; let job = { jobTitle: 'JavaScript Developer', country: 'USA' }; let employee = Object.assign(person, job); console.log(employee);
Code language: JavaScript (javascript)Keluaran
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', country: 'USA' }
Code language: CSS (css)Penggabungan Dangkal
Kedua metode spread operator (
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)_0) dan{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)1 melakukan penggabungan dangkal. Ini berarti bahwa jika suatu objek memiliki properti yang merujuk ke objek lain, properti objek asli dan objek target hasil akan merujuk ke objek yang sama. Sebagai contohlet person = { firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', contact: { phone: '408-989-8745', email: 'john.doe@example.com' } }; let job = { jobTitle: 'JavaScript Developer', location: 'USA' }; let employee = { ...person, ...job }; console.log(employee.contact === person.contact);
Keluaran
true
Code language: JavaScript (javascript)Dalam contoh ini, objek
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)_5 memiliki properti{ jobTitle: 'JavaScript Developer', country: 'England', city: 'London' }
Code language: CSS (css)0 yang merujuk ke objek. Setelah penggabungan, objek{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)5 dan{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)7 memiliki properti{ jobTitle: 'JavaScript Developer', country: 'England', city: 'London' }
Code language: CSS (css)0 yang merujuk ke objek yang samaPenggabungan Yang Dalam
Untuk secara rekursif menggabungkan properti kunci string yang dimiliki dan diwarisi dari objek sumber ke objek target, Anda dapat menggunakan Lodash. metode _merge()
_.merge(object, [sources])
Code language: CSS (css)Dalam tutorial ini, Anda telah mempelajari cara menggabungkan objek dalam JavaScript menggunakan metode spread operator (
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)0) dan{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Code language: CSS (css)1