【JavaScript】配列内の重複するプロパティ値を削除する方法（mapとSetを活用）

はじめに

JavaScriptでオブジェクトの配列を扱っていると、プロパティの中に同じ値が重複して含まれることがあります。たとえば、学生の点数リストに同一の数値が2回入っているようなケースです。本記事では、map()とSetを組み合わせて、こうした重複値を効率的に取り除く方法を解説します。

対象となる配列

まず、以下のような「学生名」と「点数」を持つオブジェクトの配列を想定します。

var details = [
    {
        studentName: "John",
        studentMarks: [78, 98]
    },
    {
        studentName: "David",
        studentMarks: [87, 87]
    },
    {
        studentName: "Bob",
        studentMarks: [48, 58]
    },
    {
        studentName: "Sam",
        studentMarks: [98, 98]
    },
]

このデータを見ると、「David」の点数には87が2回、「Sam」の点数には98が2回繰り返されています。これらの重複を取り除き、さらに値が1つだけになった場合は配列ではなく単一の値として格納し直すのが今回の目標です。

解決策：map()とSetを使う

重複の除去には、map()で各オブジェクトを順に処理しながら、Setオブジェクトが「同じ値を1つしか保持しない」という特性を利用します。

コード例

var details = [
    {
        studentName: "John",
        studentMarks: [78, 98]
    },
    {
        studentName: "David",
        studentMarks: [87, 87]
    },
    {
        studentName: "Bob",
        studentMarks: [48, 58]
    },
    {
        studentName: "Sam",
        studentMarks: [98, 98]
    },
]
details.map(tempObj => {
    if (typeof (tempObj.studentMarks) == 'object') {
        tempObj.studentMarks = [... new Set(tempObj.studentMarks)]
        if (tempObj.studentMarks.length == 1) {
            tempObj.studentMarks = tempObj.studentMarks[0]
        }
    }
});
console.log(details);

コードのポイント

• [...new Set(配列)]：スプレッド構文とSetを組み合わせることで、重複のない新しい配列を1行で作成できます。
• length == 1 の判定：重複を除いた結果、要素が1つだけになった場合は、配列ではなくその値そのものを代入し直しています。

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js.

ここでは、ファイル名を demo292.js として保存したものとしています。

実行結果

コンソールには以下のように出力されます。

PS C:\Users\Amit\javascript-code> node demo292.js
[
    { studentName: 'John', studentMarks: [ 78, 98 ] },
    { studentName: 'David', studentMarks: 87 },
    { studentName: 'Bob', studentMarks: [ 48, 58 ] },
    { studentName: 'Sam', studentMarks: 98 }
]

ご覧のとおり、「David」の点数は重複が除かれて 87、「Sam」の点数は 98 となり、どちらも配列ではなく単一の値として出力されました。

まとめ

JavaScriptで配列内の重複するプロパティ値を削除するには、map()で各要素を走査し、Setによる重複除去を組み合わせるのがシンプルかつ効果的です。要素が1つになった場合のデータ形式の扱い方も押さえておくと、実際の開発現場で非常に役立ちます。