JavaScriptで配列内の要素を検索する方法｜indexOf・find・findIndexの使い方を解説

JavaScriptには、配列から要素を検索するための便利なメソッドが多数用意されています。この記事では、基本的なindexOfから、条件を指定して検索できるfind()やfindIndex()まで、実例を交えながらわかりやすく解説します。

indexOf()：最も基本的な検索メソッド

indexOfは、配列全体を先頭から順に走査し、指定した要素が見つかればそのインデックス（位置）を返します。見つからなかった場合は -1 を返します。

サンプルコード

let people = ["Harry", "Martha", "John", "Sam"];
console.log(people.indexOf("John"))
console.log(people.indexOf("Jim"))

出力結果

2
-1

「John」は配列の2番目（0始まり）に存在するため 2 が返り、配列に存在しない「Jim」に対しては -1 が返されます。

find()：条件に一致する最初の要素を取得する

より高度な検索を行いたい場合は、find() メソッドが便利です。find() は、引数として渡したコールバック関数の条件を満たす、最初の要素そのものを返します。オブジェクトが格納された配列の検索にも対応しています。

サンプルコード

let people = [{
    name: 'Agnes',
    age: 25
}, {
    name: 'Richard',
    age: 21
}, {
    name: 'Zoe',
    age: 35
}];
let personNameStartsWithR = people.find(person => person.name[0] === 'R');
console.log(personNameStartsWithR)

出力結果

{ name: 'Richard', age: 21 }

この例では、「名前の頭文字がRである」という条件に一致する最初の人物オブジェクトが返されています。

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

find() は要素そのもの（オブジェクト）を返しますが、その「位置」を知りたい場合には findIndex() を使います。条件判定の方法は find() と同じです。

サンプルコード

let people = [{
    name: 'Agnes',
    age: 25
}, {
    name: 'Richard',
    age: 21
}, {
    name: 'Zoe',
    age: 35
}];
let personNameStartsWithR = people.findIndex(person => person.name[0] === 'R');
console.log(personNameStartsWithR)

出力結果

1

条件に一致した「Richard」は配列内のインデックス1にあるため、1 が返されます。なお、一致する要素が存在しない場合は -1 が返ります。

fromIndex：検索開始位置を指定する

find() や findIndex() は、コールバック関数を引数として受け取り、そのコールバックは element（要素）・index（インデックス）・array（配列） の3つの引数を受け取ることができます。また、これらのメソッドは条件に一致する最初の1件のみを返す点に注意してください。

一方、indexOf には第2引数として fromIndex を渡すことができ、任意の位置から検索を続行できます。重複する要素が複数ある場合に特に役立ちます。

サンプルコード

let people = ["Harry", "Martha", "John", "Sam", "Martha"];
console.log(people.indexOf("Martha"));
console.log(people.indexOf("Martha", 3))

出力結果

1
4

1回目の呼び出しでは先頭から検索してインデックス 1 の「Martha」が見つかり、2回目の呼び出しではインデックス3以降から検索するため、後ろの 4 の「Martha」が見つかっています。

まとめ

• indexOf()：単純な値の検索に最適。見つからない場合は -1 を返す。第2引数で検索開始位置も指定可能。
• find()：コールバックの条件に一致する最初の「要素そのもの」を返す。
• findIndex()：コールバックの条件に一致する最初の要素の「インデックス」を返す。

用途に応じてこれらのメソッドを使い分けることで、配列操作をより効率的かつ可読性高く記述できるようになります。