Làm cách nào để hợp nhất hai mảng với các đối tượng thành một trong JavaScript?

Giả sử, chúng ta có hai mảng đối tượng như thế này -

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

Các mảng này không có bất kỳ đối tượng lặp lại nào bên trong (lặp lại trên cơ sở thuộc tính 'name') nhưng tồn tại một số đối tượng có tên lặp trong đối tượng thứ nhất và thứ hai.

Chúng tôi được yêu cầu viết một hàm JavaScript nhận hai mảng như vậy và trả về một mảng mới.

Mảng mới phải chứa tất cả các đối tượng duy nhất của cả mảng thứ nhất và thứ hai. Tại đây, để kiểm tra tính duy nhất của bất kỳ đối tượng nào, chúng tôi sẽ kiểm tra thuộc tính "name" duy nhất của nó.

Ví dụ

Mã cho điều này sẽ là -

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));

Đầu ra

Và đầu ra trong bảng điều khiển sẽ là -

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