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

本記事では、JavaScriptのfind()メソッドを使用して、配列内の要素を検索する方法について解説します。

JavaScriptのArray型のfind()メソッドとは

ES5では、配列の中のある要素を見つけるには、indexOf()メソッドやlastIndexOf()メソッドを使用します。しかし、これらのメソッドは、最初にマッチした要素のインデックスを返すだけなので、少し使いにくいです。

ES6では、Array.prototypeオブジェクトにfind()という新しいメソッドが導入され、find()メソッドを使うことで、条件に一致する配列内の要素が簡単に取得できるようになりました。

以下はfind()メソッドの基本的な構文です。

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

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

ちなみに、コールバック関数において配列のインデックス番号を使用したい場合は、次の構文になります。

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

さらに、コールバック関数の中でfind()メソッドの対象となっている配列を使用する場合はこのようになります。

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

JavaScriptのfind()メソッドの具体的なコード例

それでは、JavaScriptのfind()メソッドを使用して配列から条件に合致する要素を取得する方法を、具体的なコード例で説明します。

配列の中から条件に合致する要素を取得する

const numbers = [12, 34, 25, 77, 93]

result1 = numbers.find(num => num > 90)
result2 = numbers.find(num => num > 50)

console.log(result1) // 93
console.log(result2) // 77

find()メソッドは条件に合致する要素のうち、最初の要素を返すことが分かりますね。

配列内から条件に合致するオブジェクトを取得する

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

result = persons.find(person => person.name.includes('高'))

console.log(result) // {name: '高橋', age: 24}

このようにfind()メソッドは、オブジェクトのプロパティに対しても、条件を指定することができます。