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

JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。

find()メソッドとは

find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。

基本構文

arr.find(callback(element[, index[, array]])[, thisArg])
  • callback: 各要素をテストする関数。条件を満たす場合は true を返します。
  • element: 現在処理中の配列要素。
  • thisArg（省略可能）: コールバック内で this として使用される値。

サンプルコード：動物の配列から「lion」を検索する

以下は、ボタンをクリックすると配列の中から「lion」を検索して表示する完全なHTMLコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript配列の要素検索</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .find {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptで配列から要素を検索する</h1>
<div class="find"></div>
<button class="fillArr">クリックしてください</button>
<h3>上のボタンをクリックすると、動物の中からライオン（lion）を検索します</h3>
<script>
    function findLion(animal) {
        return animal === "lion";
    }
    let fillEle = document.querySelector(".find");
    let arr = ["cow", "lion", "bull", "tiger"];
    fillEle.innerHTML = arr.join(", ");
    document.querySelector(".fillArr").addEventListener("click", () => {
        fillEle.innerHTML = arr.find(findLion);
    });
</script>
</body>
</html>

実行結果

ページを読み込むと、まず配列の内容（cow, lion, bull, tiger）が画面に表示されます。

JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

「クリックしてください」ボタンを押すと、find()メソッドが実行され、条件に一致した最初の要素である「lion」が表示されます。

JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

その他の配列検索方法

find()以外にも、目的に応じて便利な検索メソッドがいくつか用意されています。

indexOf() — 要素の位置（インデックス）を取得

const arr = ["cow", "lion", "bull", "tiger"];
const index = arr.indexOf("lion"); // 結果: 1

一致する要素が見つかった場合はそのインデックス番号を、見つからない場合は -1 を返します。

includes() — 要素が含まれているかを判定

const arr = ["cow", "lion", "bull", "tiger"];
const hasLion = arr.includes("lion"); // 結果: true

要素が配列に存在すれば true、存在しなければ false を返すシンプルなメソッドです。

filter() — 条件に一致するすべての要素を取得

const arr = ["cow", "lion", "bull", "tiger", "lioness"];
const result = arr.filter(animal => animal.includes("lion")); // 結果: ["lion", "lioness"]

条件を満たす要素が複数ある場合に、それらすべてを新しい配列として取得できます。

まとめ

  • find()：条件に一致する最初の要素の「値」を取得したいときに使用。
  • indexOf()：要素のインデックス位置が必要なときに使用。
  • includes()：要素の有無だけを確認したいときに使用。
  • filter()：条件に一致する複数の要素をまとめて取得したいときに使用。

用途に応じてこれらのメソッドを使い分けることで、JavaScriptでの配列操作をより効率的に行えます。

  1. JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

    JavaScriptで文字列を検索する方法 JavaScriptで文字列の中から特定の文字列を探すには、search()メソッドを使用します。このメソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に一致した位置（インデックス）を返し、見つからなかった場合は -1 を返します。 以下は、JavaScriptで文字列を検索するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" />

  2. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=