【ES6】JavaScriptのfindIndex()メソッドの使い方を易しく解説！

本記事では、JavaScriptのfindIndex()を使用して、配列内で条件に合致する要素のインデックス番号を取得する方法について解説します。

JavaScriptのfindIndex()メソッドとは

ES6では、Array.prototypeにfindIndex()というメソッドが追加され、条件に合致する最初の要素のインデックス番号を取得することができるようになりました。

また、findIndex()メソッドは条件に合致する要素が存在しない場合、-1 を返します。

以下がfindIndex()の基本的な構文です。

配列.findIndex((element) => 条件)

上記のようにfindIndex()メソッドは引数にコールバック関数を取ります。

ちなみに、コールバック関数では第2引数を取ることもでき、配列内のインデックス番号を使用したい場合に有効です。

配列.findIndex((element, index) => 条件)

さらに、第3引数まで取ることもでき、対象となっている配列を扱いたいときに有効です。

配列.findIndex((element, index, array) => 条件)

findIndex()メソッドを使用した具体的なコード例

それではJavaScriptのfindIndex()を使用した例をいくつか見てみましょう。

findIndex()の基本的な使い方

まずは最もシンプルな使い方から。

const numbers = [2, 4, 5, 8, 9, 11, 17]

const result = numbers.findIndex((number) => number > 10)

console.log(result) // 5

以上のように条件に合致する最初の要素のインデックス番号が取得できます。

合致する要素が複数ある場合でも、最初の要素だけが取得されることに注意です。

条件を複数指定して使用する

条件部分を少し複雑な形にしてみます。

const numbers = [2, 4, 5, 8, 9, 11, 17]

const result = numbers.findIndex((number) => number > 5 && number < 10)

console.log(result) // 3

上記のように条件を複数組み合わせることも可能です。

オブジェクトの配列に対して使用する

const persons = [
  {
    name: '田中',
    age: 20
  },
  {
    name: '高橋',
    age: 24
  },
  {
    name: '高杉',
    age: 32
  },
]

const result = persons.findIndex((person) => person.age < 30)

console.log(result) // 0

このように、findIndex()メソッドはオブジェクトが格納されている配列に対しても使用することができます。