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",
  },
];