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

indexOf findIndex find は配列の要素検索の三兄弟で、似ているけど違いがあります。javascript で開発する以上必ず使うと言っていいほどよく使います。

よく使う文字列と配列検索関数比較

関数	検索対象	引数	true 返値	それ以外返値
indexOf()	文字列	文字列	インデックス	-1
test()	文字列	正規表現	true	false
search()	文字列	正規表現	インデックス	-1
findIndex()	配列	コールバック関数	インデックス	-1
find()	配列	コールバック関数	値	undefined
some()	配列	コールバック関数	true	false
includes()	配列	検索値	true	false

※ 値、インデックスは最初にマッチした箇所の値とインデックス

# indexOf 文字列検索

検索値があれば、インデックス値を返す、なければ -1

const strList = "abc";
const result = strList.indexOf("a");

console.log(result);
// 0

undefined と undefine

'undefined'.indexOf() は undefined が undefined という文字列の中の 0 の位置に見つかるため、 0 を返します。
'undefine'.indexOf() は undefined が undefine という文字列の中で見つからないため、 -1 を返します。

const undefinedResult = "undefined".indexOf();
console.log(undefinedResult);
// 0

const undefineResult = "undefine".indexOf();
console.log(undefineResult);
// -1

# test 文字列正規表現検索

文字列を正規表現で検索、あれば true を返す、それ以外の場合は false

const str = "table football";

const regex = new RegExp("foo*");
const globalRegex = new RegExp("foo*", "g");

console.log(regex.test(str));
// true

console.log(globalRegex.lastIndex);
// 0

console.log(globalRegex.test(str));
// true

console.log(globalRegex.lastIndex);
// 9

console.log(globalRegex.test(str));
// false

# search 文字列正規表現検索

文字列を正規表現で検索、検索値があれば、最初にマッチした箇所インデックスを返す、それ以外の場合は -1

const paragraph = "The quick brown fox jumps over the lazy dog";

const regex = /[w]/g;

console.log(paragraph.search(regex));
// 13

# findIndex 配列検索

コールバック関数 true の場合、最初のインデックス値を返す、それ以外の場合は -1

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

const result = numberList.findIndex((el) => el > 3);

console.log(result);
// 3

# find 配列検索

コールバック関数 true の場合、最初の要素の値を返す、それ以外の場合は undefined

const numberList = [5, 12, 8, 130, 44];

const result = numberList.find((el) => el > 10);

console.log(result);
// 12

# some 配列検索

配列内の少なくとも 1 つの要素がコールバック関数 true の場合、true を返す、それ以外の場合は false

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

const result = (element) => element > 10;

console.log(numberList.some(result));
// false

# includes 配列検索

配列に検索値があれば、true を返す、それ以外の場合は false

const pets = ["cat", "dog", "bat"];

console.log(pets.includes("cat"));
// true

console.log(pets.includes("at"));
// false

配列内で見つかった要素のインデックスが必要な場合は、findIndex() や indexOf() 使います。
配列内に値が存在するかどうかを調べる必要がある場合は、includes() 使います。
includes() は大文字と小文字を区別します。
false は 0 と同じとはみなされません。
計算位置が 0 以下の場合は、配列全体検索されます。

2022-01-27 2年前

javascript

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

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

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

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

Jsconfig と Tsconfig

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

Cookie localStorage sessionStorage の違い

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

国際化 i18n と地域化 L10N

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

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

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

Javascript DataTables で excel 風 table 作る

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

javascript 配列重複排除

javascriptで配列重複排除の複数やり方をまとめ、よく使うfilterとEcmaScript ...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー

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

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

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

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

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

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

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

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

Javascript var let const 変数宣言の違い

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

Javascript 電話番号フォーマット

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

vuejs back to top button component 作成

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

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

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

Sweet Alert swal に複数 content

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

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

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

javascript 開発で出会った TypeError

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

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ダウンロードが必要になったので、作ってみまし...

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

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