配列の要素がプリミティブな値の場合、重複を取り除くには Set が便利です。
要素がオブジェクトの場合、Set ではなく Map を利用して重複を排除できます。
- Set - JavaScript | MDN
- Map - JavaScript | MDN
以下では Map を利用した重複排除の関数を例示します。
関数（TypeScript） #
TypeScript で記載しています。型定義があるのは引数部分のみですので、JavaScript として使いたい場合は引数部分の型を削除してください。
/** 指定されたキーを基準に重複を取り除いたオブジェクトの配列を返す。重複した場合は後に渡された要素が残る。 */
function deduplicateByKey<T extends object>(key: keyof T, ...args: T[]) {
return Array.from(new Map(args.map((v) => [v[key], v])).values());
}
実行結果 #
const data1 = [
{ id: '111', name: 'Alice' },
{ id: '222', name: 'Bob' },
{ id: '333', name: 'Charlie' },
];
const data2 = [
{ id: '111', name: 'David' },
{ id: '222', name: 'Eve' },
];
const data3 = [
{ id: '111', name: 'Frank' },
{ id: '444', name: 'Grace' },
];
const result = deduplicateByKey('id', ...data1, ...data2, ...data3);
// result
[
{
id: '111',
name: 'Frank',
},
{
id: '222',
name: 'Eve',
},
{
id: '333',
name: 'Charlie',
},
{
id: '444',
name: 'Grace',
},
];