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

이 배열에는 ('name' 속성을 기준으로 반복) 반복되는 개체가 없지만 첫 번째 및 두 번째 개체에 이름이 반복되는 개체가 있습니다.

이러한 두 개의 배열을 사용하여 새 배열을 반환하는 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' }
]