【JavaScript】オブジェクト配列の重複をプロパティで削除する方法

JavaScriptでオブジェクトの配列を扱う際、特定のプロパティが重複している要素を取り除きたいケースはよくあります。本記事では、name プロパティの値が重複するオブジェクトを配列から除外する実装方法を解説します。

問題の概要

まず、次のようなオブジェクトの配列があるとします。

const arr = [
  {name: "Jack", age: "14"},
  {name: "bob", age: "14"},
  {name: "sue", age: "21"},
  {name: "Jill", age: "16"},
  {name: "Jack", age: "21"}
];

この配列に対して、name の値が重複しているオブジェクトをすべて削除する関数を作成する必要があります。なお、最初に出現した要素は残し、2回目以降の出現のみを削除するものとします。

したがって、上記の配列に対して期待される出力結果は以下の通りです。

const arr = [
  {name: "Jack", age: "14"},
  {name: "bob", age: "14"},
  {name: "sue", age: "21"},
  {name: "Jill", age: "16"}
];

最後の {name: "Jack", age: "21"} は、name が「Jack」の要素がすでに存在するため削除されています。

実装コード例

以下は、hasOwnProperty() を使って出現済みの名前を管理し、重複要素をその場で削除（in-place）するコード例です。

const arr = [
    {name: "Jack", age: "14"},
    {name: "bob", age: "14"},
    {name: "sue", age: "21"},
    {name: "Jill", age: "16"},
    {name: "Jack", age: "21"}
];
const removeDuplicate = arr => {
    const appeared = {};
    for(let i = 0; i < arr.length; ){
        if(!appeared.hasOwnProperty(arr[i].name)){
            appeared[arr[i].name] = 1;
            i++;
            continue;
        };
        arr.splice(i, 1);
    };
};
removeDuplicate(arr);
console.log(arr);

コードのポイント

• appeared オブジェクト： すでに確認した name の値をキーとして記録し、重複判定に使用します。
• ループ内での i 制御： 重複が見つかった場合は splice(i, 1) で要素を削除し、インデックスを進めません。新規の名前の場合のみ i++ で次へ進みます。
• 元の配列を直接変更： この実装は元の配列自体を書き換えます。元の配列を保持したい場合は、事前にスプレッド構文などでコピーしておきましょう。

出力結果

このコードを実行すると、コンソールには次のように表示されます。

[
    { name: 'Jack', age: '14' },
    { name: 'bob', age: '14' },
    { name: 'sue', age: '21' },
    { name: 'Jill', age: '16' }
]

補足：より現代的な代替手段

上記の手法以外にも、Set や filter() を組み合わせることで、より簡潔に重複除去を実現できます。

const removeDuplicate = arr => {
    const seen = new Set();
    return arr.filter(item => {
        if(seen.has(item.name)) return false;
        seen.add(item.name);
        return true;
    });
};
console.log(removeDuplicate(arr));

こちらの方法では元の配列を変更せず、新しい配列を返すため、イミュータブルな処理を好む場合に適しています。用途やコードスタイルに応じて使い分けるとよいでしょう。