JavaScript 配列 findIndex() メソッド

概要: このチュートリアルでは、配列のfindIndex()メソッドを使用して、指定されたテストを満たす最初の要素を見つける方法を学習します。

JavaScript 配列 findIndex() メソッドの紹介

ES6では、Array.prototypeにfindIndex()という新しいメソッドが追加されました。これにより、指定されたテスト関数を満たす配列内の最初の要素を見つけることができます。

findIndex()メソッドは、テスト関数を満たす要素のインデックスを返し、テストに合格した要素がない場合は-1を返します。

以下は、findIndex()メソッドの構文を示しています。

findIndex(testFn(element[, index[, array]])[, thisArg])Code language: CSS (css)

findIndex()は2つの引数を取ります。

1) testFn

testFnは、関数がtrueを返すまで（要素が見つかったことを示す）、配列の各要素で実行する関数です。

testFnは3つの引数を取ります。

elementは配列内の現在の要素です。
indexは処理中の現在の要素のインデックスです。
arrayはfindIndex()が呼び出された配列です。

2) thisArg

thisArgは、callbackを実行するときにthisとして使用されるオプションのオブジェクトです。thisArg引数を省略すると、findIndex()関数はundefinedを使用します。

findIndex()は、testFnが真の値（trueに強制変換される値）を返す要素が見つかるまで、配列内のすべての要素でtestFnを実行します。

findIndex()はそのような要素を見つけると、すぐに要素のインデックスを返します。

JavaScript 配列 findIndex() の例

JavaScript 配列findIndex()メソッドの使用例をいくつか見てみましょう。

1) シンプルな配列の例で Array findIndex() メソッドを使用する

次の例は、ranks配列で数字7の最初の出現位置のインデックスを返します。

let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex(rank => rank === 7);
console.log(index);Code language: JavaScript (javascript)

出力

2) より複雑な条件で Array findIndex() メソッドを使用する

この例では、findIndex()メソッドを使用して、ranks配列のインデックス2以降の数字7の最初の出現位置のインデックスを取得します。

let ranks = [1, 5, 7, 8, 10, 7];

let index = ranks.findIndex(
    (rank, index) => rank === 7 && index > 2
);

console.log(index);Code language: JavaScript (javascript)

出力

3) オブジェクトの配列で Array findIndex() メソッドを使用する

次の例では、Array findIndex()メソッドを使用して、価格が1000を超える最初の製品のインデックスを見つけます。

const products = [
  { name: 'Phone', price: 999 },
  { name: 'Computer', price: 1999 },
  { name: 'Tablet', price: 995 },
];

const index = products.findIndex(product => product.price > 1000);

console.log(index); // 1Code language: JavaScript (javascript)

まとめ

指定されたテストを満たす最初の要素を見つけるには、JavaScript 配列findIndex()メソッドを使用します。

このチュートリアルは役に立ちましたか？