การรวมสองอาร์เรย์ออบเจกต์เป็นอาร์เรย์เดียวใน 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'}
];

อาร์เรย์ทั้งสองไม่มีออบเจกต์ซ้ำภายในตัวเอง (ซ้ำตาม property 'name') แต่อาจมี name ซ้ำระหว่างอาร์เรย์ทั้งสอง

เราจำเป็นต้องเขียนฟังก์ชัน JavaScript ที่รับสองอาร์เรย์และคืนอาร์เรย์ใหม่ที่มีออบเจกต์ unique จากทั้งสองอาร์เรย์ (unique ตาม property 'name')

ตัวอย่างโค้ด

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' }
]