JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのfindIndex()メソッドの使い方を徹底解説

JavaScriptのfindIndex()メソッドは、配列の中から条件に合致する最初の要素を見つけ、そのインデックス（添字）を返すためのメソッドです。条件を満たす要素が存在しない場合は「-1」が返されます。

配列の検索処理において、要素そのものではなく「位置」を知りたい場合に非常に便利なメソッドです。

findIndex()の基本構文

array.findIndex(function(currentValue, index, arr), thisValue)

各引数の意味は以下の通りです。

  • currentValue：現在処理中の要素の値
  • index：現在処理中の要素のインデックス（省略可能）
  • arr：対象となる配列本体（省略可能）
  • thisValue：コールバック関数内でthisとして使う値（省略可能）

例1：最大ランクのプレイヤーのインデックスを取得する

まずは、特定の条件（400点以上）を満たす最初の要素のインデックスを取得するサンプルを見てみましょう。

<!DOCTYPE html>
<html>
<body>
   <h2>Rank</h2>
   <button onclick="display()">Result</button>
   <p id="demo"></p>
   <p>最も高いランクを持つプレイヤーのインデックスを検索します。</p>
   <script>
      var points = [100, 150, 200, 250, 300, 400];
      function topRank(points) {
         return points >= 400;
      }
      function display() {
         document.getElementById("demo").innerHTML = "index = "+points.findIndex(topRank);
      }
   </script>
</body>
</html>

実行結果

上記のコードを実行し、「Result」ボタンをクリックすると、条件（400点以上）に一致する最初の要素のインデックスが表示されます。

JavaScriptのfindIndex()メソッドの使い方を徹底解説

ボタンをクリックした後の表示：

JavaScriptのfindIndex()メソッドの使い方を徹底解説

この例では、配列 [100, 150, 200, 250, 300, 400] の中で400以上の値を持つ要素はインデックス5の「400」だけなので、結果として「index = 5」が返されます。

例2：特定のランクポイントのインデックスを取得する

次に、特定の値（200点）と完全に一致する要素のインデックスを検索する例です。

<!DOCTYPE html>
<html>
<body>
   <h2>Rank</h2>
   <button onclick="display()">Result</button>
   <p id="demo"></p>
   <p>特定のランクポイントを持つプレイヤーのインデックスを検索します。</p>
   <script>
      var points = [100, 150, 200, 250, 300, 400];
      function topRank(points) {
         return points == 200;
      }
      function display() {
         document.getElementById("demo").innerHTML = "index = "+points.findIndex(topRank);
      }
   </script>
</body>
</html>

実行結果

JavaScriptのfindIndex()メソッドの使い方を徹底解説

「Result」ボタンをクリックすると：

JavaScriptのfindIndex()メソッドの使い方を徹底解説

この場合、値が200と一致する要素はインデックス2にあるため、結果は「index = 2」と表示されます。

findIndex()を使う際のポイント

  • 条件に一致する要素が複数あっても、返されるのは最初の1つのインデックスだけです。
  • どの要素も条件を満たさない場合は -1 が返されるため、実行後に必ず判定処理を入れるのが安全です。
  • 類似メソッドの find() は要素の「値」を返しますが、findIndex() は「位置（インデックス）」を返すという違いがあります。
  1. JavaScriptの配列some()メソッドの使い方をわかりやすく解説

    JavaScriptのArray.some()メソッドは、配列の要素の中に、指定されたテスト（条件）を満たすものが「1つでも存在するかどうか」を判定するためのメソッドです。ここでいうテストとは、配列の各要素に対して順番に実行されるコールバック関数のことを指します。コールバック関数が1つでもtrueを返した時点でsome()はtrueを返し、すべての要素が条件を満たさなかった場合はfalseを返します。なお、空の配列に対して呼び出した場合は常にfalseを返すという仕様になっている点にも注意しましょう。some()メソッドのサンプルコード以下は、配列のsome()メソッドを使った具体的な実装例で

  2. 【JavaScript】関数から返された配列にアクセスする方法

    JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。 実装例：関数から配列を返してアクセスする 以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。 <!DOCTYPE html> <html lang=ja> <head> &l