JavaScript：オブジェクトの配列から重複を取り除く関数

JavaScript：オブジェクトの配列から重複を取り除く関数

April 20, 2022

配列の要素がプリミティブな値の場合、重複を取り除くには Set が便利です。

要素がオブジェクトの場合、Set ではなく Map を利用して重複を排除できます。

以下では 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',
  },
];