# 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
  • 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 DataTables で excel 風 table 作る
javascript 配列 重複排除
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 ダウンロード
開発におけるコーディングルール・規約