JavaScriptで配列を処理するときに、指定した条件にマッチ（満たす）する要素の配列番号が欲しいときがあります。
そんなときに使えるのがfindIndexメソッドです。
メソッド名が指すように、対象の要素のインデックス番号(配列番号)を見つけるメソッドです。
ここではfindIndexメソッドの使い方を実例で解説しています。
findIndexメソッドの使い方
findIndexメソッドは指定した配列の要素をfor文で一つづつ取り出し、条件と一致した要素があればその配列番号を返すメソッドです。
findIndexメソッドの使い方は、条件式の中でどんな引数を使いたいかによって、大きく３つに分かれます。
- 各要素の値のみを使う。
- 各要素のインデックス番号も使う。
- もともとの配列を使う。
findIndexの注意点
findIndexを使う際は以下に注意してください。
- 条件にマッチする要素が複数あっても、最初にマッチするものしか抜き出さない（一つマッチした時点で処理を終了する）
- 指定した条件にマッチする要素が１つも見つからない場合は「-1」を返す。
各要素の値のみを使う
記述方法
対象となる配列の一つ一つの要素の値のみを使う場合、引数は第1引数のみになります。
array.findIndex( ( 引数 ) => { return 条件式 } )なお、アロー関数では、条件式が1行で表せる場合「return」を省略して以下のように記述することができます。
条件式が1行の場合
array.findIndex( ( 引数 ) => ( 条件式 ) )引数名に指定はありませんが、要素を表す英語「element」から「e」や「elem」を使うことがよくあります。
上記の記述はfunctionを省略したアロー関数です。functionを使って以下のように書くこともできます。
array.findIndex( function( 引数 ){ retunr 条件式 } )実例（アロー関数）
例えば、[ “aaa”, “bbb”, “ccc”, 111, 222, 333 ]が入った配列「arr」があったとき、「”ccc”」の要素がその配列の中に含まれるか？含んでいる場合の配列番号は何番目かを調べる場合は以下のようになります。
arr = [ "aaa", "bbb", "ccc", 111, 222, 333 ]
arr.findIndex( (elem) => elem === "ccc" )
//処理結果
// 2※配列番号は０始まりであることに注意してください。
実例（function）
上記をアロー関数ではなくfunctionを使って書き変えると以下のようになります。
arr = [ "aaa", "bbb", "ccc", 111, 222, 333 ]
arr.findIndex( function(elem){ return elem === "ccc"} )
//処理結果
// 2各要素のインデックス番号も使う
記述方法
対象となる配列の一つ一つの要素の値だけでなく、インデックス番号も使いたい場合は、引数は第1引数と第２引数を指定します。
array.findIndex( ( 引数1, 引数2 ) => { return 条件式 } )なお、アロー関数では、条件式が1行で表せる場合「return」を省略して以下のように記述することができます。
条件式が1行の場合
array.findIndex( ( ( 引数1, 引数2 ) ) => ( 条件式 ) )インデックス番号の引数名に指定はありませんが、indexを使うことが一般的です。
実例
例えば、[ “aaa”, “bbb”, “ccc”, “ddd” ]が入った配列「arr」があったとき、各要素の長さがindex番号と一致するものがあれば、その配列番号を返し、どれも一致しない場合は「-1」を返す処理は以下のようになります。
arr = [ "aaa", "bbb", "ccc", "ddd" ]
arr.findIndex( (elem, index) => ( elem.length === index ) )
//処理結果
// 3indexのみを使う
第1引数と第2引数を指定した場合でも、処理の中で必ず２つともを使わなければいけないというわけではありません。
第2引数のみを利用する（あるいはどれも利用しない）でも処理はエラーになりません。
arr = [ "aaa", "bbb", "ccc", "ddd" ]
arr.findIndex( (elem, index) => ( index === 2 ) )
//処理結果
// 2もともとの配列を使う
記述方法
対象となる配列の一つ一つの要素の値だけでなく、その配列自体も使いたい場合は、引数は第1引数と第３引数まで指定します。
array.findIndex( ( 引数1, 引数2, 引数3 ) => { return 条件式 } )- 引数1： 一つ一つの要素が入る。
- 引数2：インデックス番号が入る。
- 引数3：対象の配列が入る。
なお、アロー関数では、条件式が1行で表せる場合「return」を省略して以下のように記述することができます。
条件式が1行の場合
array.findIndex( ( ( 引数1, 引数2, 引数3 ) ) => ( 条件式 ) )配列の引数名に指定はありませんが、arrやarrayを使うことが一般的です。
実例
例えば、[ “a”, “bb”, “ccc”, “dddd”, “fffff” ]が入った配列「arr」があったとき、配列の長さと各要素長さが一致するものがあれば、その配列番号を返し、どれも一致しない場合は「-1」を返す処理は以下のようになります。
array = [ "a", "bb", "ccc", "dddd", "fffff" ]
array.findIndex( (elem, index, arr) => ( arr.length <= elem.length ) )
//処理結果
// 4もともとの配列のみを使う
第1引数と第2引数、第3引数を指定した場合でも、処理の中で必ず３つともを使わなければいけないというわけではありません。
第３引数のみを利用する（あるいはどれも利用しない）でも処理はエラーになりません。
arr = [ "aaa", "bbb", "ccc", "ddd" ]
arr.findIndex( (elem, index, arr ) => ( arr.length === 2 ) )
//処理結果
// -1「arr.length」は４なので、結果は該当なしの「-1」になります。
