# javascript 配列 重複排除

配列の重複はじく作業は開発の際によくあります。foreach でくるくる回してやるのもいいですが、パフォーマンス的に悪く、もっと省エネでスマートなやり方がほしかったときに filter や map set などもおすすめします。javascript の世界は楽しい世界!javascript でやろう!

# filter ファンクション使う

filter は一般的でよくあります、構文がわかりやすいし、以前から使われているので安定安心のやり方です。

filter function 構文

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

引数:callback
配列の各要素に対して実行するテスト関数です。この関数が true を返した要素は残され、false を返した要素は取り除かれます。

この関数は3つの引数を受け付けます。

  • element
    配列内で処理中の現在の要素です。
  • index 省略可
    配列内で処理中の現在の要素の位置です。
  • array 省略可
    filter メソッドが実行されている配列です。
  • thisArg 省略可
    callback を実行するときに this として使用する値です。

返値:新しい配列

例文

const words = [
  "spray",
  "limit",
  "elite",
  "exuberant",
  "destruction",
  "present",
];

const result = words.filter((e) => e.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

filter 使って連想配列の重複排除

const arr = [
  { id: 1, name: "filter 1" },
  { id: 2, name: "filter 2" },
  { id: 3, name: "filter 3" },
  { id: 2, name: "重複 2" },
  { id: 3, name: "重複 3" },
];

const result = arr.filter((e, index, self) => {
  return self.findIndex((el) => el.id === e.id) === index;
});

console.log(result);
// [{ id: 1, name: "filter 1" }, { id: 2, name: "filter 2" }, { id: 3, name: "filter 3" }]

実際は id より name の重複チェックで使う時が多いでしょうが、使い方は一緒です。

# map 使うやり方

filter は使い慣れているけど、パフォーマンス的に良くないので、腕を磨くなら、map や set を使った方がシンプルでいいでしょう

const arr = [{ id: 1 }, { id: 2 }, { id: 2 }, { id: 3 }];
const map = new Map(arr.map((o) => [o.id, o]));

console.log(map);
// { 1 => { id: 1 }, 2 => { id: 2 }, 3 => { id: 3 } }

# EcmaScript 2015 から導入された Set を使う

JavaScript リファレンス標準組み込みオブジェクト Set (opens new window)

const array1 = ["A", "B", "C", "A", "B"];
const array2 = [...new Set(array1)];

console.log(array2); // [ "A", "B", "C" ]

const array3 = [1, 5, 3, 1, 5];
const array4 = Array.from(new Set(array1));

console.log(array4); // [ 1, 5, 3 ]

配列と違い、Set, Map では順序が保証されないというのが一般的ですが、JavaScript では仕様によってこれが保証されています。

# LoDash ライブラリの _.uniq() 関数を使う

const arr = [1, 2, 3, 1, 2];
const output = _.uniq(arr);

console.log(output); // [1, 2, 3]
2022-01-07
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
開発におけるコーディングルール・規約