# 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
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

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 日本語 shift-js 対応 CSV ダウンロード
php 開発におけるコーディングルール・規約