【JavaScript】findIndexメソッドの使い方！条件に一致する要素のインデックスを取得！

この記事ではJavaScriptの『findIndexメソッド』について、

  • findIndexメソッドとは
  • findIndexメソッドの構文
  • findIndexメソッドの使い方
    • 条件に一致する要素のインデックスを取得する
    • 複雑な条件で要素のインデックスを取得する
  • findIndexメソッドの特徴
    • 配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す
    • テスト関数を満たす要素が見つからない場合は-1を返す
    • テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する
    • 空のスロットはundefinedと同じように扱われる
  • コールバック関数のthisArgについて

などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

findIndexメソッドとは

findIndexメソッドは、配列内の要素に対してテスト関数を用いて検索し、最初に見つかった要素のインデックスを返すメソッドです。条件に一致する要素が見つからない場合は-1を返します。このメソッドは、特定の条件を満たす要素の位置を効率的に見つけるのに便利です。

後ほどfindIndexメソッドの構文や使い方について詳しく説明しますが、まず以下に示す簡単なサンプルコードを見てみましょう。

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex((element) => element > 2);
console.log(index); // 2

上記のサンプルコードでは、配列arrの各要素に対してテスト関数を用いて検索し、最初に見つかった2より大きい要素(この場合3)のインデックスを返しています。

findIndexメソッドの構文

findIndexメソッドの構文を以下に示します。

構文

array.findIndex(callbackFn[, thisArg])

arrayは検索対象の配列です。findIndexメソッドの引数と返り値を以下に示します。

引数

  • callbackFn
    • 配列の各要素に対して実行するテスト関数です。
    • テスト関数には以下の引数を渡すことができます(第1引数のelementのみを渡して使用することが多いです)。
      • element: テスト実行中の要素
      • index(省略可能): テスト実行中の要素のインデックス
      • array(省略可能): findIndexメソッドでテストしている配列
  • thisArg(省略可能)
    • callbackFn関数内でthisとして使用される値です。

返り値(戻り値)

  • テスト関数(callbackFn)が見つけた最初の要素のインデックスを返します。見つからなかった場合には-1が返されます。

findIndexメソッドの使い方

findIndexメソッドについて、以下に示している使い方をこれから説明します。

  • 条件に一致する要素のインデックスを取得する
  • 複雑な条件で要素のインデックスを取得する

上記の使い方について順番に説明します。

条件に一致する要素のインデックスを取得する

findIndexメソッドを使うと、条件に一致する最初の要素のインデックスを取得できます。

以下のサンプルコードでは、配列内の要素のうち、最初に現れる偶数の要素のインデックスを取得しています。

const arr = [1, 3, 5, 7, 8, 10];
const index = arr.findIndex((element) => element % 2 === 0);
console.log(index); // 4

複雑な条件で要素のインデックスを取得する

findIndexメソッドは、複雑な条件を指定して要素のインデックスを取得することも可能です。

以下のサンプルコードでは、配列内のオブジェクトのうち、特定のプロパティの値に一致するオブジェクトのインデックスを取得しています。

const persons = [
  { id: 1, name: 'Taro', age: 30 },
  { id: 2, name: 'Hanako', age: 25 },
  { id: 3, name: 'Ken', age: 35 },
];
const index = persons.findIndex((person) => person.id === 2);
console.log(index); // 1

findIndexメソッドの特徴

findIndexメソッドの特徴を以下に示します。

  • 配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す
  • テスト関数を満たす要素が見つからない場合は-1を返す
  • テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する
  • 空のスロットはundefinedと同じように扱われる

各特長について順番に説明します。

配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す

findIndexメソッドは、配列の先頭の要素からテスト関数を実行し、条件に一致する最初の要素のインデックスを返します。サンプルコードを以下に示します。

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex((element) => element > 2);
console.log(index); // 2

上記のサンプルコードから分かるように、テスト関数を満たす要素が複数存在する場合でも、findIndexメソッドでは条件に一致する最初の要素のインデックスのみを返します。

テスト関数を満たす要素が見つからない場合は-1を返す

findIndexメソッドはテスト関数を満たす要素が見つからない場合には、-1を返します。サンプルコードを以下に示します。

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex((element) => element > 10);
console.log(index); // -1

上記のサンプルコードは、10より大きい要素を検索していますが、そのような要素は配列内に存在しないため、-1を返しています。

テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する

findIndexメソッドは、テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了します。サンプルコードを以下に示します。

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex((element) => {
  console.log('Checking element:', element);
  return element > 2;
});
console.log(index);
// ログ出力
// Checking element: 1
// Checking element: 2
// Checking element: 3
// 2

上記のサンプルコードでは、各要素についてコンソールにログを出力しています。2より大きい最初の要素を見つけた後、配列の反復処理が終了していることが分かります。

空のスロットはundefinedと同じように扱われる

findIndexメソッドは空のスロットに対しても処理を実行します。その際、空のスロットはundefinedとして扱われます。サンプルコードを以下に示します。

const arr = [1, , , , 5];

// すべての要素を表示
const index = arr.findIndex((element) => {
  console.log('number:', element);
  return element === 5;
});
console.log(index);
// ログ出力
// number: 1
// number: undefined
// number: undefined
// number: undefined
// number: 5
// 4

上記のサンプルコードでは、各要素についてコンソールにログを出力しています。空のスロットはundefinedとして扱われていることが分かります。

コールバック関数のthisArgについて

findIndexメソッドの第2引数に指定できるthisArgはコールバック関数内でthisとして利用されるオブジェクトを指定するものです。以下のサンプルコードでは、findIndexメソッドのコールバック関数内でthisはobjを指しているため、this.thresholdは10となります。

const arr = [5, 12, 8, 130, 44];
const obj = { threshold: 10 };

const index = arr.findIndex(function (element) {
  return element > this.threshold;
}, obj);
console.log(index); // 1

このように、findIndexメソッドなどの配列メソッドで第2引数にthisArg（ここではobj）を渡すと、コールバック関数内でそのobjがthisとして参照されます。

アロー関数は、自身のスコープ内でthisを持たない特性があります。そのため、findIndexメソッドの第2引数にthisArg(ここではobj)を渡しても、コールバック関数内でそのobjがthisとして正しく参照することができません。そのため、アロー関数ではなく通常の関数(functionキーワードを使った関数)を使用しています。

本記事のまとめ

この記事ではJavaScriptの『findIndexメソッド』について、以下の内容を説明しました。

  • findIndexメソッドとは
  • findIndexメソッドの構文
  • findIndexメソッドの使い方
    • 条件に一致する要素のインデックスを取得する
    • 複雑な条件で要素のインデックスを取得する
  • findIndexメソッドの特徴
    • 配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す
    • テスト関数を満たす要素が見つからない場合は-1を返す
    • テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する
    • 空のスロットはundefinedと同じように扱われる
  • コールバック関数のthisArgについて

お読み頂きありがとうございました。