Setオブジェクトを使ってJavaScriptで配列の中に重複した要素があるかを確認する 🔍

結論

function isUniq(arr) {
  return new Set(arr).size === arr.length;
}

isUniq([0, 1, 2]); // => true
isUniq([0, 1, 1]); // => false

という感じです。

経緯

配列の中に重複した要素があるかを確認したい場合、lodashを導入しているプロジェクトであれば、uniqを使って確認しています。

function isUniq(arr: any[]) {
  return _.uniq(arr).length === arr.length;
}

lodash.com

lodash.com

が。これだけのために、わざわざlodashを導入するのも勿体ないので、なにかスマートな方法がないものかと調べてみたのですが、Setオブジェクトを使うと簡単に実現できそうです。

developer.mozilla.org

Setオブジェクトには重複した値を登録できないので、配列の中身をSetオブジェクトにaddしていけば、重複した要素は弾くことができます。

mozillaのページに配列から重複した要素を取り除く例が載っているので、引用しますと、

// Use to remove duplicate elements from the array

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

console.log([...new Set(numbers)])

// [2, 3, 4, 5, 6, 7, 32]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set#remove_duplicate_elements_from_the_array より引用

という感じです。

なので、先の例のlodashのuniqをSetオブジェクトに置き換えると、

function isUniq(arr: any[]) {
  return new Set(arr).size === arr.length;
}

となります。
Setオブジェクトはlengthではなくsizeで要素数が取得できます。
対応ブラウザを確認してみましたが、IE11でも動くようです。驚きです。