keyが部分的に重複している2つの連想配列の配列を重複分は消して結合したい

Question

keyが部分的に重複している2つの連想配列の配列を重複分は消して結合したい

Reactで２つの連想配列の配列を結合しようと試みています。

const A = [
0:{age: 3, animal: dog,},
1:{age: 1, animal: cat,},
2:{age: 4, animal: monkey,},
3:{age: 3, animal: bird,},
}

const B = [
0:{age: 3, animal: cat, danger: false},
1:{age: 5, animal:　hippopotamus, danger: true},
2:{age: 2, animal: monkey, danger: true},
3:{age: 10, animal: whale, danger: false},
}

上記のAにBの配列を結合する際に、Bのanimalの　keyがAの物と被っていた場合、
Aの配列から被っている配列を削除してからBの配列と結合させるというものを作成したいです。
結合した後の配列は下記に記します。

result ={
0:{age: 3, animal: dog,},
1:{age: 3, animal: bird,},
2:{age: 3, animal: cat, danger: false},
3:{age: 5, animal:　hippopotamus, danger: true},
4:{age: 2, animal: monkey, danger: true},
5:{age: 10, animal: whale, danger: false},
}

試したこと

①
const result = Array.from(new Set([...A, ...B]));
console.log(result);

②
var check = A.find(value => value.animal != B.animal);
console.log(check);
const result = {...check,...B}

どのように処理を行えば良いか、教えて頂けないでしょうか。

Answer 1

const A = [
{age: 3, animal: "dog",},
{age: 1, animal: "cat",},
{age: 4, animal: "monkey",},
{age: 3, animal: "bird",},
];

const B = [
{age: 3, animal: "cat", danger: false},
{age: 5, animal: "hippopotamus", danger: true},
{age: 2, animal: "monkey", danger: true},
{age: 10,animal: "whale", danger: false},
];
const C =[...A.filter(x=>!B.map(x=>x.animal).includes(x.animal)),...B];
console.dir(C);

Comments

[kgoa]

ありがとうございました！
こんな風に書けるのですね。とても勉強になりました。