2024/2/1記事内に広告が含まれていることがあります。JavaScriptで配列を処理するときに、指定した条件にマッチ(満たす)する要素の配列番号が欲しいときがあります。そんなときに使えるのがfindIndexメソッドです。メソッド名が指すように、対象の要素のインデックス番号(配列番号)を見つけるメソッドです。ここではfindIndexメソッドの使い方を実例で解説しています。実例もともとの配列のみを使う参考findIndexメソッドの使い方findIndexメソッドは指定した配列の要素をfor文で一つづつ取り出し、条件と一致した要素があればその配列番号を返すメソッドです。findIndexメソッドの使い方は、条件式の中でどんな引数を使いたいかによって、大きく3つに分かれます。各要素の値のみを使う。各要素のインデックス番号も使う。findIndexの注意点findIndexを使う際は以下に注意してください。条件にマッチする要素が複数あっても、最初にマッチするものしか抜き出さない(一つマッチした時点で処理を終了する)指定した条件にマッチする要素が1つも見つからない場合は「-1」を返す。対象となる配列の一つ一つの要素の値のみを使う場合、引数は第1引数のみになります。)なお、アロー関数では、条件式が1行で表せる場合「return」を省略して以下のように記述することができます。)point引数名に指定はありませんが、要素を表す英語「element」から「e」や「elem」を使うことがよくあります。上記の記述はfunctionを省略したアロー関数です。functionを使って以下のように書くこともできます。]が入った配列「arr」があったとき、「”ccc”」の要素がその配列の中に含まれるか?含んでいる場合の配列番号は何番目かを調べる場合は以下のようになります。2※配列番号は0始まりであることに注意してください。実例(function)上記をアロー関数ではなくfunctionを使って書き変えると以下のようになります。対象となる配列の一つ一つの要素の値だけでなく、インデックス番号も使いたい場合は、引数は第1引数と第2引数を指定します。)なお、アロー関数では、条件式が1行で表せる場合「return」を省略して以下のように記述することができます。)pointインデックス番号の引数名に指定はありませんが、indexを使うことが一般的です。]が入った配列「arr」があったとき、各要素の長さがindex番号と一致するものがあれば、その配列番号を返し、どれも一致しない場合は「-1」を返す処理は以下のようになります。3indexのみを使う第1引数と第2引数を指定した場合でも、処理の中で必ず2つともを使わなければいけないというわけではありません。第2引数のみを利用する(あるいはどれも利用しない)でも処理はエラーになりません。対象となる配列の一つ一つの要素の値だけでなく、その配列自体も使いたい場合は、引数は第1引数と第3引数まで指定します。一つ一つの要素が入る。引数2:インデックス番号が入る。引数3:対象の配列が入る。アロー関数では、条件式が1行で表せる場合「return」を省略して以下のように記述することができます。)point配列の引数名に指定はありませんが、arrやarrayを使うことが一般的です。]が入った配列「arr」があったとき、配列の長さと各要素長さが一致するものがあれば、その配列番号を返し、どれも一致しない場合は「-1」を返す処理は以下のようになります。4もともとの配列のみを使う第1引数と第2引数、第3引数を指定した場合でも、処理の中で必ず3つともを使わなければいけないというわけではありません。第3引数のみを利用する(あるいはどれも利用しない)でも処理はエラーになりません。-1「arr.length」は4なので、結果は該当なしの「-1」になります。Array.prototype.findIndex()JavaScript「役に立った」と思ったら、記事のシェアをお願いします。コピー[PR]shin関連記事JavaScript【JavaScript】if文で配列に要素があるかないかを調べるときの注意点|lengthを使う。nullはNG(nullも要素とみなされる)JavaScript【JavaScript】デフォルト引数とは何か?引数の中のイコール=の意味と使い方を実例で解説|undefinedやNaNを回避する方法(引数の数が足りない時の対処法)JavaScript【JavaScript】if文条件式の中の「||」とは何か?縦線(パイプ)2つ。toLocaleDateStringのオプション一覧)「▲保護されていない通信」とは何!?消す方法lolipopでのSSH設定方法。'NoneType'のエラー原因と対処法まとめ(初心者向け・実例でわかりやすく解説)2024/2/272024/2/27【CSS】メディアクエリ(@media)とは何か?使い方を実例で解説|.cssファイルやlinkタグでの画面幅以上・以下の指定(初心者向け、わかりやすい)2023/6/202023/10/1【画像で解説】WinSCPの使い方。pull(プル)とは何か?使い方を実例で解説|引数が無い場合の処理内容やFETCH_HEADとは何か?--rebaseオプションの使い方2023/7/182024/2/22カテゴリーPCHTMLDesignAffiliateCSS・SCSSrubyRailsSpreadSheetAffinityAppSheetDatabaseAppsScriptEditorStripeAWSLINEPHPECWordPressServerSquareVue.jsGeneralJavaScriptSEOgit/githubBrowserDockerJSONPythonCommandLaravelNode-jsサイト運営者shinWEB制作・エクステリアデザインを行う、山と自然大好きなプログラマー&デザイナーです。コロナを機に長野の山奥に移住、標高1200mの地で薪ストーブのあるログハウスで暮らしています。妻と子供をこよなく愛する1児の父。'NoneType'のエラー原因と対処法まとめ(初心者向け・実例でわかりやすく解説)2024/2/272024/2/27【CSS】メディアクエリ(@media)とは何か?使い方を実例で解説|.cssファイルやlinkタグでの画面幅以上・以下の指定(初心者向け、わかりやすい)2023/6/202023/10/1【画像で解説】WinSCPの使い方。render2023/11/282023/11/28【JavaScript】2次元配列を1次元に戻す方法。toLocaleDateStringのオプション一覧)2024/10/26【JavaScript】if文条件式の「&&」と「&」の違いは何か?(アンパサンド1つと2つの注意点。2進数の掛け算方法2023/12/132023/12/26【JavaScript】正規表現で変数を使う方法|RegExpの使い方とフラグ一覧(実例で解説。初心者向け)2024/3/142024/3/30【JavaScript】if文条件式の中の「||」とは何か?縦線(パイプ)2つ。||と&&の違いを実例で解説2023/6/212023/12/1【JavaScript】if文で配列に要素があるかないかを調べるときの注意点|lengthを使う。r.children[i]}}}}}()タイトルとURLをコピーしました。