この記事では、findIndex()で配列の要素を検索する方法について見ていきたいと思います。
findIndex()とは
findIndex()は、指定した配列の中から指定した条件を満たす最初の要素のインデックス番号を返します。
findIndex()の書き方
配列.findIndex(コールバック関数);
findIndex()の引数
・コールバック関数
コールバック関数というのは関数の中で使われる関数のことですね。
コールバック関数の引数には次の３つがあります。
・コールバック関数の引数
第１引数・・・現在処理されている要素
第２引数・・・現在処理されている要素のインデックス（任意）
第３引数・・・呼び出し元の配列（任意）
findIndex()の返り値
・検索した条件と一致する最初の要素のインデックス
それでは、findIndex()を用いた例を見ていきたいと思います。
まずは第１引数（現在処理されている要素）を使う例を見ていきましょう。
第１引数（現在処理されている要素）の使用例
それでは、第１引数（現在処理されている要素）を使った例を見ていきたいと思います。
let numbers = [11, 21, 31, 41, 51];let index = numbers.findIndex( element => element >= 30 );console.log(index);
ここでは、30以上の要素を条件に指定していますので
その条件にあった要素のインデックスが返されるはずです。
見てみますと
こうですね。
30以上の最初の要素「31」のインデックス「2」が返されているのがわかりますね。
では次に第２引数（現在処理されている要素のインデックス）を使った例を見ていきましょう。
第２引数（現在処理されている要素のインデックス）の使用例
では第２引数（現在処理されている要素のインデックス）を使った例を見ていきたいと思います。
let numbers = [11, 21, 31, 41, 51];let index = numbers.findIndex( (element, index) => index >= 3 );console.log(index);
ここでは、インデックスが「3」以上の条件ににしています。
なので、その条件をみたす最初のインデックスが返されるはずです。
では見てみると
こうですね。
インデックスが3以上の最初のインデックス「3」が返されていますね。
では、次に第３引数（呼び出し元の配列）を使った例を見ていきましょう。
第３引数（呼び出し元の配列）の使用例
それでは第３引数（呼び出し元の配列）を使った例を見ていきたいと思います。
let numbers = [11, 21, 31, 41, 51];let index = numbers.findIndex( (element, index, array) => array[index] >= 20 );console.log(index);
ここでは、配列のインデックス番目が20以上の条件にしています。
なので、その条件にあった最初の要素のインデックスが返されるはずです。
見てみますと
こうですね。
配列のインデックス番目が20以上の最初の要素「21」のインデックス「1」が返されていますね。
まとめ
このように、findIndex()を使うことで条件を指定して配列を検索することができます。
条件はコールバック関数で指定することができます。
その結果、指定した条件をみたす最初の要素のインデックスが返されるということですね。
なお、配列の検索には他にもindexOf()、find()、some()などが使えますので、
よろしければご参照ください。
コメント