Cara menggabungkan objek dalam javascript

mata teras

Kaedah penggabungan objek yang biasa digunakan dalam JavaScript termasuk pengendali pengembangan (
• ) dan kaedah .... Pengendali berkembang lebih moden dan ringkas, manakala Object.assign() lebih serasi dan sesuai untuk persekitaran yang lebih tua. Object.assign()
memperluaskan pengendali dan
• kedua -duanya melakukan salinan cetek apabila menggabungkan objek, yang bermaksud bahawa objek bersarang masih merujuk kepada objek asal. Mengubah objek bersarang dalam objek yang digabungkan boleh menjejaskan objek asal, mengakibatkan kesan sampingan yang tidak dijangka. Object.assign()
Untuk penggabungan yang mendalam (dengan betul menggabungkan objek bersarang), perpustakaan seperti fungsi tersuai atau lodash boleh digunakan. Contoh fungsi tersuai
• disediakan dalam artikel, yang mewujudkan salinan kedalaman objek sebelum menggabungkannya menggunakan teknik deepMergeObjects. JSON.parse(JSON.stringify())

Pemaju sering perlu menggabungkan atau menyalin objek untuk menyelesaikan tugas seperti menyusun data atau membuat contoh baru. Teknik -teknik seperti pengendali Expand (

) (digunakan untuk menggabungkan sifat pelbagai objek) dan kaedah ... (digunakan untuk menyalin sifat satu objek ke yang lain) adalah alat penting untuk menyelesaikan tugas -tugas ini. Walau bagaimanapun, pemahaman kapan dan bagaimana menggunakannya adalah penting untuk memanipulasi objek dengan cekap. Dalam artikel ini, saya akan memperkenalkan beberapa aplikasi praktikal kaedah ini, kelebihan dan kekurangan mereka, dan konsep yang sangat menyalin dan kemudian menggabungkan objek bersarang. Object.assign()

katalog

kaedah gabungan objek
• • memperluaskan operator ()
    1. ...
  • kaedah
    2. Object.assign()
  perangkap dan langkah berjaga -jaga
• kaedah mana yang hendak dipilih
• Gabungan Deep: Salinan Deep dan Gabungkan Objek
• fungsi gabungan kedalaman tersuai
  Kesimpulan

kaedah gabungan objek

1

Expand Operator () adalah kaedah biasa untuk menggabungkan objek dalam JavaScript. Bentuknya ialah

. Apabila terdapat atribut dengan kunci yang sama dalam objek sumber, pengendali memperluas menimpa nilai dalam objek sasaran dengan nilai angka objek sumber terkini. ...

2 ... { ...object1, ...object2 } adalah kaedah lain yang digunakan dalam JavaScript untuk menggabungkan objek. Sintaksinya adalah

, di mana objek sumber digabungkan ke dalam objek sasaran. Apabila terdapat atribut dengan kunci yang sama dalam objek sumber,

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

akan menimpa nilai dalam objek sasaran dengan nilai numerik objek sumber terkini.

Object.assign()

perangkap dan langkah berjaga -jaga Object.assign() Object.assign(target, source1, source2, ...) Object.assign() Berikut adalah perangkap dan masalah yang mungkin dihadapi apabila menggabungkan objek menggunakan pengendali Expand dan kaedah

dalam JavaScript:

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

1

memperluaskan pengendali dan

kedua -duanya melakukan salinan cetek apabila menggabungkan objek. Ini bermakna objek bersarang masih merujuk kepada objek asal. Mengubah objek bersarang dalam objek yang digabungkan boleh menjejaskan objek asal, yang mungkin membawa kepada kesan sampingan yang tidak dijangka. Object.assign()

Lihat kedalaman gabungan di bawah.

2

Apabila menggabungkan objek dengan sifat kunci yang sama, pengendali mengembangkan dan

menimpa nilai dalam objek yang dihasilkan dengan nilai angka dari objek sumber terkini. Jika ditangani secara tidak wajar, tingkah laku ini boleh menyebabkan kehilangan data.

Object.assign() 3

Pengendali pengembangan adalah sebahagian daripada ECMAScript 2015 (ES6) dan tidak disokong dalam persekitaran JavaScript yang lebih tua atau penyemak imbas seperti Internet Explorer. Ini boleh menyebabkan masalah keserasian jika kod anda perlu dijalankan dalam persekitaran yang lebih lama. Dalam kes ini, lebih baik menggunakan

kerana ia mempunyai sokongan yang lebih luas.

4 Object.assign() memperluaskan pengendali dan

hanya akan menyalin atribut yang boleh dibaca dari objek sumber ke objek sasaran. Ciri-ciri yang tidak dapat disenaraikan tidak disalin semasa proses penggabungan, yang boleh menyebabkan kehilangan data atau tingkah laku yang tidak dijangka.

5

Jika anda perlu menggabungkan objek besar atau melakukan operasi gabungan dengan kerap, menggunakan Object.assign() atau mengembangkan pengendali boleh menyebabkan masalah prestasi kerana objek baru dibuat semasa proses penggabungan.

6

Salin atribut dari prototaip objek sumber ke objek sasaran, yang mungkin membawa kepada tingkah laku yang tidak dijangka jika prototaip objek sumber mempunyai sifat yang bertentangan dengan sifat objek sasaran. Sebaliknya, pengendali pengembangan tidak menyalin sifat prototaip. Object.assign()

Pastikan untuk memberi perhatian kepada perangkap dan masalah ini apabila menggunakan pengendali Expand atau

dalam JavaScript. Dalam kes -kes tertentu, anda mungkin perlu mengambil kaedah lain, seperti pengklonan yang mendalam atau fungsi penggabungan yang mendalam, untuk mengatasi batasan -batasan ini.

Object.assign() Kaedah mana yang hendak dipilih?

Kedua -dua Object.assign()

dan mengembangkan pengendali dengan berkesan dapat menggabungkan objek. Pengendali berkembang lebih mudah dan lebih moden, manakala

lebih serasi dengan persekitaran JavaScript yang lebih lama. untuk menentukan kaedah mana yang hendak digunakan, pertimbangkan:

Object.assign() Jika persekitaran anda menyokong pengendali pengembangan (seperti versi ECMAScript terkini), gunakannya kerana ia adalah sintaks. Object.assign()

Jika keserasian dengan persekitaran JavaScript yang lebih tua adalah kritikal, pilih

.

Jika anda perlu menyalin objek bersarang (objek leher objek bersarang dalaman), baca objek salinan yang mendalam.
2. Object.assign() gabungan dalam: Salinan dalam dan gabungan objek
memperluaskan pengendali dan

kedua -duanya membuat salinan cetek objek yang disalin. Pada asasnya, ini bermakna objek baru akan merujuk objek bersarang yang sama seperti objek asal (seperti tatasusunan dan fungsi), bukannya salinannya.

Adalah penting untuk memahami dan mengelakkannya sebelum menggabungkan objek.

Contoh berikut menunjukkan cara mengedit objek bersarang objek salinan mempengaruhi objek asal:

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

Output

kod ini menunjukkan bahawa sifat shallowCopyPlanet objek asal planet telah diubah (anda mungkin tidak mahu ini). info.moons

fungsi gabungan kedalaman tersuai

Ini adalah fungsi yang sangat menyalin pelbagai objek sebelum menggabungkan dan mengembalikan objek tunggal. Dalam Kod, fungsi

menerima bilangan objek input, mewujudkan salinan kedalaman mereka menggunakan teknik deepMergeObjects, dan kemudian menggunakan operasi pengembangan dalam kaedah JSON.parse(JSON.stringify()) untuk memadankannya. Objek yang digabungkan akan mengandungi salinan kedalaman sifat dari objek input. reduce()

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

Kesimpulan

Terima kasih kerana membaca! Saya harap artikel ini membantu anda mendapatkan gambaran mengenai penggabungan objek dalam JavaScript, bukan hanya pengenalan yang mudah. Mampu menggabungkan objek harus menggabungkan dengan baik dengan kemahiran JavaScript anda dan melanjutkan keupayaan pengekodan anda. Jika anda mempunyai sebarang pertanyaan atau komen, sila sertai Forum Komuniti SitePoint.

Soalan Lazim untuk menggabungkan objek dalam JavaScript

Apakah konsep menggabungkan objek dalam JavaScript?

Menggabungkan objek dalam JavaScript merujuk kepada proses menggabungkan dua atau lebih objek ke dalam satu objek. Ini biasanya untuk menggabungkan sifat dan kaedah pelbagai objek ke dalam satu objek, supaya data dapat diuruskan dan dimanipulasi dengan lebih mudah. Objek yang digabungkan akan mengandungi semua sifat dan kaedah objek asal. Sekiranya terdapat sifat pendua, nilai objek terakhir akan mengatasi nilai sebelumnya.

Bagaimana menggabungkan objek dalam JavaScript menggunakan pengendali pengembangan?

Pengendali pengembangan (

) dalam JavaScript adalah cara yang moden dan efisien untuk menggabungkan objek. Ia membolehkan pengembangan objek yang boleh dimakan seperti ekspresi array atau rentetan untuk digunakan di mana ia dijangka menjadi sifar atau lebih parameter atau elemen. Berikut adalah contoh cara menggunakannya: ...

const planet = {
  name: 'Earth',
  emoji: '?',
  info: {
    type: 'terrestrial',
    moons: 1
  }
};

// 使用展开运算符进行浅拷贝
const shallowCopyPlanet = { ...planet };

// 修改浅拷贝中的嵌套对象
shallowCopyPlanet.info.moons = 2;

console.log('原始行星：', planet.info.moons);
// 原始行星：2
console.log('行星的浅拷贝：', shallowCopyPlanet.info.moons);
// 行星的浅拷贝：2

Apakah peranan kaedah dalam menggabungkan objek? Object.assign() Kaedah

digunakan untuk menyalin semua nilai yang boleh dibaca satu atau lebih objek sumber ke objek sasaran. Ia akan mengembalikan objek sasaran. Ini adalah cara yang sangat berguna untuk menggabungkan objek kerana ia membolehkan anda menggabungkan pelbagai objek sumber ke dalam satu objek sasaran. Walau bagaimanapun, perlu diperhatikan bahawa jika harta yang sama didapati dalam pelbagai objek, nilai objek terakhir dengan harta itu akan mengatasi nilai sebelumnya. Object.assign()

Bolehkah saya menggabungkan objek bersarang di JavaScript?

Ya, anda boleh menggabungkan objek bersarang di JavaScript. Walau bagaimanapun, proses ini sedikit lebih rumit kerana anda perlu memastikan bahawa objek bersarang digabungkan dengan betul, bukan hanya sifat peringkat atas. Ini sering dipanggil gabungan dalam. Object.assign() dan pengendali pengembangan tidak melakukan gabungan mendalam secara lalai. Untuk melakukan ini, anda perlu melaksanakan fungsi tersuai atau menggunakan perpustakaan seperti Lodash.

Apa yang berlaku apabila menggabungkan objek, mengulangi atribut?

Apabila menggabungkan objek dalam JavaScript, jika sifat pendua wujud, nilai objek terakhir akan mengatasi nilai sebelumnya. Ini kerana apabila menggabungkan objek, ia melintasi sifat objek sumber dan menyerahkannya ke objek sasaran. Jika atribut sudah wujud pada objek sasaran, nilainya akan digantikan dengan nilai baru.

Adakah mungkin untuk menggabungkan susunan dalam JavaScript seperti menggabungkan objek?

Ya, tatasusunan boleh digabungkan dalam JavaScript menggunakan kaedah yang sama sebagai objek. Memperluas pengendali adalah cara biasa untuk menggabungkan tatasusunan. Berikut adalah contoh:

const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }

Bagaimana menggabungkan objek tanpa mengubah objek asal?

Kaedah pengendali

dan Object.assign() membuat objek baru apabila digabungkan, meninggalkan objek asal tidak berubah. Ini adalah ciri utama kaedah ini kerana ia menggalakkan Invariance, konsep teras dalam pengaturcaraan berfungsi di mana data tidak pernah berubah.

Bolehkah saya menggabungkan objek dengan jenis data yang berbeza dalam JavaScript?

Ya, anda boleh menggabungkan objek dengan jenis data yang berbeza dalam JavaScript. Objek yang digabungkan akan mengandungi semua sifat dan kaedah objek asal tanpa mengira jenis datanya. Walau bagaimanapun, jika terdapat sifat pendua dengan jenis data yang berbeza, nilai objek terakhir akan menimpa nilai sebelumnya.

Apakah kesan prestasi menggabungkan objek JavaScript?

Menggabungkan objek JavaScript boleh memberi kesan prestasi, terutamanya apabila berurusan dengan objek besar. Kerumitan masa pengendali pengembangan dan kaedah Object.assign() adalah O (n), di mana n ialah jumlah sifat dalam objek sumber. Oleh itu, apabila memutuskan untuk menggabungkan objek, adalah penting untuk mempertimbangkan saiz objek.

Perpustakaan apa yang boleh membantu menggabungkan objek dalam JavaScript?

Ya, terdapat beberapa perpustakaan yang dapat membantu menggabungkan objek dalam JavaScript. Lodash adalah perpustakaan popular yang menyediakan pelbagai fungsi utiliti untuk memanipulasi objek dan tatasusunan, termasuk fungsi gabungan untuk objek penggabungan yang mendalam. Perpustakaan lain adalah jQuery, yang menyediakan kaedah $.extend() untuk menggabungkan objek.

Atas ialah kandungan terperinci Cara menggabungkan objek dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!