JavaScriptで2つの配列を1つのオブジェクトにマージする方法は？

これらのようなオブジェクトの2つの配列があるとします-

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'プロパティに基づいて繰り返される）繰り返しオブジェクトはありませんが、1番目と2番目のオブジェクトに繰り返し名前を持つオブジェクトがいくつか存在します。

このような2つの配列を受け取り、新しい配列を返すJavaScript関数を作成する必要があります。

新しい配列には、最初の配列と2番目の配列の両方の一意のオブジェクトがすべて含まれている必要があります。ここでは、オブジェクトの一意性を確認するために、その一意の「名前」プロパティを確認します。

例

このためのコードは-

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