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

JavaScriptの配列findIndex()関数の使い方をわかりやすく解説

JavaScriptのfindIndex()関数は、配列の中から指定した条件を満たす最初の要素を見つけ、そのインデックス番号を返すメソッドです。

条件に合う要素が見つかった場合、その要素のインデックスが返されます。もし条件を満たす要素がひとつも存在しない場合は、-1が返されるという特徴があります。

findIndex()の基本的な使い方

以下は、findIndex()関数を使ったサンプルコードです。ボタンをクリックすると、配列内の「lion」という要素のインデックスを取得して表示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .findIndex {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Array FindIndex() example</h1>
<div class="findIndex"></div>
<button class="findArr">CLICK HERE</button>
<h3>上のボタンをクリックすると、配列内の「lion」のインデックスが表示されます</h3>
<script>
    function findLion(animal) {
        return animal === "lion";
    }
    let fillEle = document.querySelector(".findIndex");
    let arr = ["cow", "lion", "bull", "tiger"];
    fillEle.innerHTML = arr;
    document.querySelector(".findArr").addEventListener("click", () => {
        fillEle.innerHTML = arr.findIndex(findLion);
    });
</script>
</body>
</html>

実行結果

ページを表示すると、まず配列の内容「cow, lion, bull, tiger」が画面に出力されます。

続いて「CLICK HERE」ボタンをクリックすると、「lion」のインデックスである 1 が画面に表示されます。

このように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