JavaScriptでfind()を使う方法を分かりやすく解説

この記事では、JavaScriptのfind()で配列の要素を検索する方法について見ていきたいと思います。

find()とは

find()は、配列の中から指定した条件を満たす最初の要素を取得するメソッドです。

find()の書き方

配列.find(コールバック関数);

find()の引数

・コールバック関数

コールバック関数というのは関数の中で使われる関数のことですね。

コールバック関数の引数には次の３つがあります。

・コールバック関数の引数

第１引数・・・現在処理されている要素

第２引数・・・現在処理されている要素のインデックス（任意）

第３引数・・・呼び出し元の配列（任意）

find()の返り値

・検索した条件に合致する最初の要素


それでは、例を見ていきましょう。

まずは第１引数（現在処理されている要素）を指定した場合を見ていきたいと思います。

第１引数（現在処理されている要素）を指定した例

では早速、第１引数（現在処理されている要素）を使った例を見ていきましょう。

この例では、30以上という条件にしています。

なので、最初にその条件を満たす数値が返されるはずです。

では見てみると

こうですね。

30以上の最初の要素「31」が出力されていますね。


それでは次に第２引数（現在処理されている要素のインデックス）を使った例を見ていきましょう。

第２引数（現在処理されている要素のインデックス）を指定した例

では、第２引数（現在処理されている要素のインデックス）を使った例を見ていきたいと思います。

ここでは、インデックスが1以上の条件で指定しています。

なので、インデックスが1以上の最初の要素が返されるはずです。

見てあげると

こうですね。

インデックスが1以上の最初の要素「21」が返されていますね。


では次に、第３引数（呼び出し元の配列）を使った例を見ていきましょう。

第３引数（呼び出し元の配列）を指定した例

では、第３引数（呼び出し元の配列）を使った例を見ていきたいと思います。

ここでは、配列のなかのインデックス番目の要素が40以上という条件になっていますね。

なので、40以上の最初の要素が返されるはずです。

見てみると

こうですね。

40以上の最初の要素「41」が返されているのがわかります。

まとめ

このように、find()を使うことで、条件を指定して配列を検索することができます。

配列の検索には他にも、indexOf()、findIndex()、some()などを使う方法がありますので、

よかったら参照してみてください。