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

関連記事

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

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

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

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

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

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

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

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

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

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

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

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

Jsconfig と Tsconfig

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

Cookie localStorage sessionStorage の違い

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

Javascript var let const 変数宣言の違い

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

Javascript 電話番号フォーマット

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

国際化 i18n と地域化 L10N

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

大きいファイルをスライス分割してアップロード

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

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

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

Javascript DataTables で excel 風 table 作る

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

vuejs back to top button component 作成

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

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成

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

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

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

Sweet Alert swal に複数 content

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

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

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

javascript 開発で出会った TypeError

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

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

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

ReferenceError: location is not defined

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

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

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

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

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

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

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

nuxtjs と codeigniter で jwt システム構築

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

nodejs 使う時のエラーたち

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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