JavaScriptで非重複な配列・オブジェクト配列を作るって話

非重複な配列って、たまに必要になりますよね。
しかも、すぐ忘れる。

てなわけで、今回は『プリミティブ配列』と『オブジェクト配列』の場合の２パターンを実装していきます！

プリミティブ配列って言ってみたけど ”数値や文字列の配列” です。
オブジェクト配列って言ってみたけど ”オブジェクトの配列” です。
※意味合ってんのか？😇

まずは完成系のコード

数値や文字列（プリミティブ）の場合

const data = [ 1, 3, 5, 3, 2, 4, 1, 4 ];

// 非重複の配列を生成
const setObject = new Set(data);
const result = [ ...setObject ];

// 出力：[ 1, 3, 5, 2, 4 ];
console.log(result)

オブジェクトの場合

const data = [
  { id: 1, name: 'キリン' },
  { id: 2, name: 'アサヒ' },
  { id: 1, name: 'キリン' },
]

// 非重複のオブジェクト配列を生成
const mapObject = new Map(data.map(item => [item.id, item]))
const result = Array.from(mapObject.values());

// 出力：[ { id: 1, name: 'キリン' }, { { id: 2, name: 'アサヒ' }, } ]
console.log(result)

SetやMapには、重複した値を排除してくれる機能があるので、それを使って非重複な配列を作っています！

• プリミティブ配列ならSetオブジェクト
• オブジェクト配列ならMapオブジェクト

めんどいからlodashで良くね？

lodashは簡単に言うと、 『たくさんの便利機能を用意しているプラグイン』 です。
もちろん、その中には 『非重複な配列を生成する機能』 も含まれています。

プリミティブ配列：uniqメソッドを使えばOK！
オブジェクト配列：uniqByメソッドを使えばOK！

まずは、lodashを読み込むところから！
読み込み方は、CDN もしくは NPM が使えます。

良く分からないってときは、CDNを使えばＯＫ 👌

CDNの場合

<!-- htmlファイルに↓↓を記述 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

NPMの場合

$ npm install --save lodash

読み込んだら次は非重複配列の実装！

プリミティブ配列の場合

const data = [ 1, 3, 5, 3, 2, 4, 1, 4 ];

// 非重複の配列を生成
const result = _.uniq(data)

// 出力：[ 1, 3, 5, 2, 4 ]
console.log(result)

オブジェクト配列の場合

const data = [
  { id: 1, name: 'キリン' },
  { id: 2, name: 'アサヒ' },
  { id: 1, name: 'キリン' },
]

// 非重複の配列を生成
const result = _.uniqBy(data, 'id'); // NOTE: 第２引数に重複したくないキー値を指定

// 出力：[ { id: 1, name: 'キリン' }, { { id: 2, name: 'アサヒ' }, } ]
console.log(result)

まとめ

• プリミティブ配列はSetオブジェクトで非重複な配列を作れる
• オブジェクト配列はMapオブジェクトで非重複な配列を作れる
• 結局は lodash を使うのが一番ラク！

他にナニカ良い方法があったら教えてください〜！！