จะรวมสองอาร์เรย์กับวัตถุใน JavaScript ได้อย่างไร?

สมมติว่าเรามีอ็อบเจ็กต์สองอาร์เรย์แบบนี้ -

const arr1 = [
   {name:'test', lastname: 'test', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'}
];
const arr2 = [
   {name:'test21', lastname: 'test21', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'},
   {name:'test22', lastname: 'test22', gender:'m'}
];

อาร์เรย์เหล่านี้ไม่มีอ็อบเจ็กต์ที่เกิดซ้ำภายใน (ทำซ้ำตามคุณสมบัติ 'ชื่อ') แต่มีออบเจกต์บางตัวที่มีชื่อซ้ำกันในออบเจ็กต์ที่หนึ่งและที่สอง

เราจำเป็นต้องเขียนฟังก์ชัน JavaScript ที่รับสองอาร์เรย์ดังกล่าวและส่งกลับอาร์เรย์ใหม่

อาร์เรย์ใหม่ควรมีอ็อบเจ็กต์ที่ไม่ซ้ำกันทั้งหมดของทั้งอาร์เรย์ที่หนึ่งและที่สอง ที่นี่ เพื่อตรวจสอบความเป็นเอกลักษณ์ของวัตถุใดๆ เราจะตรวจสอบคุณสมบัติ "ชื่อ" เฉพาะของวัตถุนั้น

ตัวอย่าง

รหัสสำหรับสิ่งนี้จะเป็น −

const arr1 = [
   {name:'test', lastname: 'test', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'}
];
const arr2 = [
   {name:'test21', lastname: 'test21', gender:'f'},
   {name:'test1', lastname: 'test1', gender:'f'},
   {name:'test2', lastname: 'test2', gender:'m'},
   {name:'test22', lastname: 'test22', gender:'m'}
];
const mergeUniquely = (arr1 = [], arr2 = []) => {
   const newArr = arr1.concat(arr2);
   const map = {};
   const res = [];
   newArr.forEach(el => {
      if(!map[el['name']]){
         res.push(el);
         map[el['name']] = 1;
      };
   });
   return res;
};
console.log(mergeUniquely(arr1, arr2));

ผลลัพธ์

และผลลัพธ์ในคอนโซลจะเป็น −

[
   { name: 'test', lastname: 'test', gender: 'f' },
   { name: 'test1', lastname: 'test1', gender: 'f' },
   { name: 'test2', lastname: 'test2', gender: 'm' },
   { name: 'test21', lastname: 'test21', gender: 'f' },
   { name: 'test22', lastname: 'test22', gender: 'm' }
]