JavaScriptでUnique（Arrayの中の重複を削除する）を実装する。

やりたいこと

JavaScriptでUnique（Arrayの中の重複を削除する）を実装します。

filterとSetを使用した2つの方法を紹介します。

実装

filterを使用した実装

Filter関数で重複するelementを削除します。

findIndex()でチェック対象のelementと同じエレメントを探し、対象よりもindexが小さいものが見つかれば削除対象としています。（arr.findIndex((ele) => element == ele) == index）

（indexが大きいのは削除しないの？と思うかもしれませんが、indexが大きい方のエレメントのチェックの時に削除されるので問題ありません。下の例だと1個目の”element0″は削除されずに2個目の”element0″が削除されます。）

const elements = ["element0", "element0", "element1", "element2", "element3", "element4","element1","element1","element2"];

const result = elements.filter((element, index, arr) => 
  arr.findIndex((ele) => element == ele) == index
);

console.log(result);

結果：

Array ["element0", "element1", "element2", "element3", "element4"]

応用

elementが同一かどうかはfindIndexも渡す関数で決まるので本当の意味で同じである必要である必要はありません。

下の例では大文字小文字も区別するUnique（result）と大文字小文字も区別しないUnique（result）を実行した結果です。

const elements = ["Element0", "element0", "element1", "element2", "element3", "element4","element1","Element1","element2"];

const result = elements.filter((element, index, arr) => 
  arr.findIndex((ele) => element == ele) == index
);
const result2 = elements.filter((element, index, arr) => 
  arr.findIndex((ele) => element.toUpperCase() == ele.toUpperCase()) == index
);
console.log(result);
console.log(result2);

結果：

 Array ["Element0", "element0", "element1", "element2", "element3", "element4", "Element1"]
 Array ["Element0", "element1", "element2", "element3", "element4"]

その他、オブジェクトの配列に対してuniqueしたい場合はチェックにelement.name == ele.nameなどで行います。

Setを使用した実装

Set（重複するエレメントが許可されないArrayみたいなもの）を作成してArrayに変換します。

const elements = ["element0", "element0", "element1", "element2", "element3", "element4","element1","element1","element2"];

console.log([...new Set(elements)]);

結果：

Array ["element0", "element1", "element2", "element3", "element4"]

結果

JavaScriptでUnique（Arrayの中の重複を削除する）を実装できました。

参考にさせていただいたサイト

Set - JavaScript | MDN

Set オブジェクトは、プリミティブ値やオブジェクト参照を問わず、あらゆる型で多数の一意の値を格納することができます。

developer.mozilla.org