Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Array find() and findIndex()

find() は Array インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。 テスト関数を満たす値がない場合は、 undefined を返します。

配列内で見つかった要素のインデックスが必要な場合は、findIndex() を使用してください。

値のインデックスを検索する必要がある場合は、indexOf() を使用してください。(findIndex() と似ていますが、それぞれの要素の等価性はテスト関数ではなく値でチェックします。)

配列内に値が存在するかどうかを調べる必要がある場合は、 includes() を使用してください。

指定したテスト関数を満たす要素があるかどうかを調べる必要がある場合は、 some() を使用してください。

指定された検査関数を満たすすべての要素を探す必要がある場合は、 filter() を使用してください。

配列ES2015

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Array.find
45
12
25
8
45
8
Array.findIndex

findIndex() は Array インスタンスのメソッドで、配列内の指定されたテスト関数に合格する最初の要素のインデックスを返します。 テスト関数に合格する要素がなかった場合は -1 を返します。
45
12
25
8
45
8
TypedArray.find

find() は TypedArray インスタンスのメソッドで、型付き配列のある要素の値が与えられたテスト関数を満たした場合、その値を返します。そうでなければ undefined を返します。このメソッドのアルゴリズムは Array.prototype.find() と同じです。
45
12
37
10
45
10
TypedArray.findIndex

findIndex() は TypedArray インスタンスのメソッドで、指定されたテスト関数を満たす型付き配列の最初の要素のインデックスを返します。テスト関数を満たす要素がない場合、 -1 を返します。このメソッドのアルゴリズムは Array.prototype.findIndex() と同じです。
45
12
37
10
45
10
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
const users = [
  { name: 'Taro', age: 25 },
  { name: 'Hanako', age: 30 },
  { name: 'Jiro', age: 25 },
];

users.find(u => u.age === 25);       // { name: 'Taro', age: 25 }
users.findLast(u => u.age === 25);   // { name: 'Jiro', age: 25 }
users.findIndex(u => u.age === 30);  // 1

ライブデモ

条件に合う最初の要素

20歳以上の最初のユーザーを探します。

プレビュー全画面表示

末尾から検索 (findLast)

配列の後ろから条件に合うものを探します。

プレビュー全画面表示

インデックスの検索

条件に合う要素の場所（番号）を取得します。

プレビュー全画面表示

実務での使いどころ

  • Array find() and findIndex() の活用

    find() は Array インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク