JavaScriptで配列の0番目のインデックスを比較して重複値を削除する方法

JavaScriptでは、配列内に重複した値が含まれることがあります。例えば、以下のような「科目名と点数」をペアにした2次元配列を考えてみましょう。

var subjectNameAlongWithMarks = [
    ["JavaScript", 78],
    ["Java", 56],
    ["JavaScript", 58],
    ["MySQL", 77],
    ["MongoDB", 75],
    ["Java", 98]
]

上記の配列を見ると、「JavaScript」と「Java」がそれぞれ2回登場しており、重複が発生しています。このように、各サブ配列の0番目（先頭）のインデックスを比較し、重複する要素を取り除きたいケースはよくあります。

この問題を解決するには、JavaScriptの Set() オブジェクトと filter() メソッドを組み合わせるのが効果的です。Set() は同じ値を1つしか保持できないという特性を持つため、重複チェックの仕組みとして活用できます。

実装例

以下のコードでは、filter() のコールバック関数内で Set を使って0番目のインデックスの値がすでに存在するかどうかを判定しています。

var subjectNameAlongWithMarks = [
    ["JavaScript", 78],
    ["Java", 56],
    ["JavaScript", 58],
    ["MySQL", 77],
    ["MongoDB", 75],
    ["Java", 98]
]
var distinctResult = subjectNameAlongWithMarks.filter(function ([value]){
    return !this.has(value) && !!this.add(value)
}, new Set())
console.log(distinctResult);

コードのポイント

• 分割代入： コールバック関数の引数 [value] により、各サブ配列の0番目の要素だけを取り出しています。
• this.has(value)： filter() の第2引数として渡した new Set() が this として参照され、その値がすでに登録済みかどうかを確認します。
• this.add(value)： 未登録の場合のみ値を Set に追加します。add() メソッドは Set 自身を返すため、!! で常に真偽値に変換できます。

プログラムの実行方法

上記のプログラムを実行するには、Node.jsを使って以下のコマンドを入力します。

node fileName.js.

実行結果

ここでは、ファイル名を demo196.js として保存しています。実行すると、次のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo196.js
[
    [ 'JavaScript', 78 ],
    [ 'Java', 56 ],
    [ 'MySQL', 77 ],
    [ 'MongoDB', 75 ]
]

ご覧のとおり、重複していた2つ目の「JavaScript」と2つ目の「Java」が削除され、0番目のインデックスの値が一意な要素だけが残りました。この手法を使えば、シンプルかつ効率的に配列から重複データを除去できます。