JavaScript 配列でオブジェクトのインデックスを検索する

条件に一致する最初のオブジェクトの位置を調べるには、ネイティブのfindIndex() メソッドを使います。たとえば、述語でオブジェクトの name、id、role プロパティを比較できます。findIndex() が返すのは数値です。一致するオブジェクトの配列インデックスを返し、一致するものがなければ -1 を返します。オブジェクトそのものは返しません。

findIndex() でオブジェクトのインデックスを検索する

配列に対して findIndex() を呼び出し、一致したときに truthy な値を返すコールバックを渡します。次の例では、人の配列から最初の編集者を検索し、メソッドが確認した位置を記録します。

この例を実行します。

このセクションのコードと表示されるラベルや出力は英語のままです。

const people = [
  { name: "Mina", role: "author" },
  { name: "Luis", role: "editor" },
  { name: "Ava", role: "editor" },
];

const checkedIndexes = [];
const index = people.findIndex((person, currentIndex) => {
  checkedIndexes.push(currentIndex);
  return person.role === "editor";
});

console.log(index);
console.log(checkedIndexes.join(", "));

1
0, 1

Luis が最初の編集者なので、返される値は 1 です。Ava も条件に一致しますが、Luis が見つかった時点で検索が終了するため、インデックス 2 は確認されません。同じメソッドはプリミティブ値の配列にも使えます。たとえば、[3, 10, 17, 23].findIndex(age => age > 18) は、18 を超える最初の年齢の位置である 3 を返します。

findIndex() のコールバックと戻り値を理解する

コールバックには、まず配列の現在の値が渡されます。さらに、現在のインデックスと検索対象の配列も、この順序で受け取れます: (currentValue, index, array)。例では検索順を示すためにインデックスを使っています。述語の判定に元の配列の情報が必要な場合は、配列の引数を使います。通常、オブジェクトのプロパティを調べるだけなら現在の値で十分です。

コールバックでは、調べたいプロパティを判定する必要があります。person.role === "editor" のような述語は真偽値を返します。より広い条件では複数のオブジェクトが一致することがありますが、findIndex() が返すのは最初の一致だけです。すべてのコールバック結果が false の場合、メソッドは -1 を返します。その値を配列の位置として使う前に確認してください。people[-1] は最後の要素を表さず、一致した要素も取得できません。

特定の値を直接検索するには、識別子などの安定したプロパティを比較します: people.findIndex(person => person.id === targetId)。比較する値と保存されたプロパティの型が同じなら、厳密等価演算子を使います。位置ではなく一致したオブジェクトを取得したい場合は find() を使います。どちらも述語による検索ですが、返す値の種類は異なります。

Lodash の _.findIndex() を代替手段として使う

プロジェクトですでに lodash を使っている場合、その _.findIndex() 関数でも、配列メソッドを呼び出さずに同様の検索ができます。プロジェクトのパッケージマネージャーでライブラリを追加します（例: npm i lodash または yarn add lodash）。Lodash の _.findIndex() ドキュメントでは、述語の簡略表記やオプションについて説明しています。

最初の引数に配列、次の引数に述語を渡します。上の people 配列に対して _.findIndex(people, { role: "editor" }) を呼び出すと 1 が返されます。Lodash はオブジェクト述語をプロパティの照合として扱います。条件に独自のロジックが必要なら、person => person.role === "editor" のような関数も渡せます。省略可能な fromIndex 引数は検索開始位置を指定します。_.findIndex(people, { role: "editor" }, 2) はインデックス 2 から検索を始めるため、そこで Ava が見つかります。ネイティブの people.findIndex(predicate) とは書式が異なりますが、どちらもそれぞれの開始位置から最初に一致したインデックスを返し、その後に一致する要素がなければ -1 を返します。lodash がプロジェクトにすでに含まれている場合や、述語の簡略表記が便利な場合は選択肢になります。ネイティブメソッドを使うために追加のライブラリは必要ありません。