Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Menggabungkan Objek JavaScript dengan Cekap dengan ID Menggunakan ES6?

Bagaimanakah Saya Boleh Menggabungkan Objek JavaScript dengan Cekap dengan ID Menggunakan ES6?

Patricia Arquette
Lepaskan: 2024-12-12 14:55:14
asal
757 orang telah melayarinya

How Can I Efficiently Merge JavaScript Objects by ID Using ES6?

Menggabungkan Objek JavaScript mengikut ID: Panduan Komprehensif

Menggabungkan objek dengan pengecam (id) ialah tugas biasa dalam pengaturcaraan JavaScript, terutamanya apabila menggabungkan data daripada sumber yang berbeza. Panduan ini akan membentangkan penyelesaian yang cekap menggunakan sintaks ES6 yang ringkas.

Penyelesaian:

Untuk menggabungkan dua tatasusunan objek berdasarkan medan id, kita boleh menggunakan yang berikut pendekatan:

const a3 = a1.map((t1) => ({
  ...t1,
  ...a2.find((t2) => t2.id === t1.id),
}));
Salin selepas log masuk

Penjelasan:

  • Kaedah map() berulang pada tatasusunan pertama (a1).
  • Untuk setiap objek t1 dalam a1, kami mencipta objek baharu menggunakan operator hamparan (...) untuk menyalin sifatnya.
  • Kami menggunakan find() pada tatasusunan kedua (a2) untuk mencari objek dengan id yang sepadan dengan t1.
  • Sifat objek yang ditemui kemudiannya disalin ke dalam objek baharu menggunakan operator hamparan.

Contoh Penggunaan:

Pertimbangkan tatasusunan contoh yang disediakan dalam soalan:

var a1 = [{ id: 1, name: "test"}, { id: 2, name: "test2"}];
var a2 = [{ id: 1, count: "1"}, {id: 2, count: "2"}];
Salin selepas log masuk

Menggunakan penyelesaian di atas akan menghasilkan tatasusunan gabungan yang diingini:

var a3 = [{ id: 1, name: "test", count: "1"}, 
          { id: 2, name: "test2", count: "2"}];
Salin selepas log masuk

Kelebihan:

  • Ringkas dan kod boleh dibaca.
  • Penggunaan operator hamparan ES6 yang cekap untuk objek bergabung.
  • Mengendalikan kedua-dua sifat sedia ada dan hilang dalam objek yang digabungkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggabungkan Objek JavaScript dengan Cekap dengan ID Menggunakan ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan