Hapicode

# javascript 配列 重複排除

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

# filter ファンクション使う

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

filter function 構文

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

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

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

  • 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

関連記事

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

Nuxt.jsとAnt Design Vue 2を使用してテーマカスタマイズしてみました。...

Javascript 非同期処理 async と await のメモ

javascript async await 使って非同期処理のいろいろ...

Cookie localStorage sessionStorage の違い

Cookie とWeb Storage localStorage sessionStorageの違い...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
大きいファイルをスライス分割してアップロード

大きいファイルを分割アップロードする方法、並行処理と失敗した際の自動アップロードします。...

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...

Javascript DataTables で excel 風 table 作る

JQueryでエクセル風テーブルの一部だけ横スクロールできるようにDataTables使ってみました...

もっと Docker 使おうよ！Node を Docker から引っ張ろうよ

Node.jsのバージョン管理をNVMではなく、Dockerから引っ張るように遊んでみました。...

javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い

よく使う文字列と配列検索関数比較 javascript 文字列と配列検索 indexOf findI...

国際化 i18n と地域化 L10N

i18n が internationalization の略で国際化という意味で、地域化は L10n...

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

フロントのブラウザー側で動くjs cookieについて...

Jsconfig と Tsconfig

javascriptで開発する際に使うjsconfigとtsconfigのjsonファイルとはなにか...

キーコード取得 ＆ キーコード一覧

javascriptで Tabキー 無効化をする仕事があり、キーコードの一覧を備忘録的にメモ...

moment.js 使って日本語曜日対応

momentjsの日本語表示、曜日の日本語表示と略称表示について...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

javascript で作る html から PDF 変換 pdfmake の日本語対応

html pdf 変換する際に使っていたjavascriptライブラリpdfmakについて調べたこと...

Javascript 電話番号フォーマット

固定電話 携帯電話 フリーダイヤルなどの電話番号をハイフォン入で自動フォーマットしてくれるjavas...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

react 強制的にレンダリングする方法

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

正規表現一覧 よく使う検索・置換のパターン

よく使う正規表現、文字検索・置換をまとめてみました。...

javascript 　指定場所にスムーズにスクロールする方法

クリックして指定のアンカーにスクロールするjavascript作成しました。scrollToとscr...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

Javascript var let const 変数宣言の違い

javascript varとlet 違い これからはvarよりlet constを書くようにすべき...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

nuxtjs と codeigniter で jwt システム構築

nuxtjsとcodeigniterでシステム構築する際のメモ...

開発におけるコーディングルール・規約

コーディングルールと規約を大事にする、複数人で開発しても、一人で開発してもメンテナンスやコードのわか...

開発時によく使うゼロ埋めパディング作業まとめ

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...