JavaScriptで配列のオブジェクトから重複を削除する方法

1. 配列のフィルタリングと重複チェック: 最も基本的なアプローチは、配列のフィルタリングと重複チェックを組み合わせる方法です。以下の例をご覧ください。

const array = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 2, name: 'Jane' }
];
const uniqueArray = array.filter((obj, index, self) =>
  index === self.findIndex((o) => o.id === obj.id && o.name === obj.name)
);
console.log(uniqueArray);

上記のコードでは、filterメソッドを使用して元の配列をフィルタリングし、findIndexメソッドを使用して重複をチェックしています。重複しているオブジェクトは最初の出現箇所のみが残り、それ以降の出現箇所は削除されます。

2. オブジェクトのプロパティをキーとしてマッピング: もう一つの方法は、オブジェクトの特定のプロパティをキーとして使用して、重複を削除する方法です。以下の例をご覧ください。

const array = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 2, name: 'Jane' }
];
const uniqueArray = Array.from(
  new Map(array.map((obj) => [`${obj.id}-${obj.name}`, obj])).values()
);
console.log(uniqueArray);

上記のコードでは、Mapオブジェクトを使用して、idとnameの組み合わせをキーとしてオブジェクトを格納します。Mapオブジェクトのvaluesメソッドを使用して一意のオブジェクトの配列を取得します。

3. ライブラリの使用: 重複を削除するためには、外部のライブラリを使用することもできます。例えば、LodashやUnderscore.jsといったライブラリには重複を削除するための便利なメソッドが用意されています。

// Lodashの例
const array = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 3, name: 'Bob' },
  { id: 2, name: 'Jane' }
];
const uniqueArray = _.uniqWith(array, _.isEqual);
console.log(uniqueArray);

上記のコードでは、LodashのuniqWithメソッドを使用して重複を削除しています。

以上の方法を使用して、JavaScriptで配列のオブジェクトから重複を削除することができます。適用するメソッドやライブラリは、プロジェクトの要件やパフォーマンスの要件に応じて選択してください。