【JavaScript】配列から条件に一致する要素を取得するfindメソッドの使い方について解説します。

なやむくん

配列から条件に一致する要素を1つ取得したい…。

なやむさん

配列操作について詳しく知りたい…。

などの疑問や悩みを解決してまいります。

取得したデータからある条件に一致した値だけを取り出したいということは開発において多いと思います。

そんなときに役立つのがArrayのfindメソッドです。

今回は配列から特定の条件に一致する要素を取得するfindの使い方について解説します。

なやむくん

配列操作は難しくて苦手です…。

みつた

活用例も交えながら分かりやすく解説していきますね！

本記事の目次

1 findメソッド
2 記述方法と活用例
3 条件に一致する要素が見つからない場合
4 まとめ

findメソッド

findメソッドとは、配列要素の中から特定の条件に一致した最初の要素を取得することができます。

条件に一致する最初の要素を取得した時点で処理は終了します。

なやむさん

どのように記述したらいいのでしょうか…。

みつた

いくつかの種類に分けて解説していきますね！

記述方法と活用例

findメソッドは以下のように記述します。

配列.find(配列の値=> 処理内容)

取得元の配列要素内の値それぞれに対して処理内容を実行していきます。

活用例①：数値配列の中から特定の条件に一致する数値を取得

配列numbersが持つ値の中からelement > 3、つまり3以上の値を取得しています。

最初に取得したのは4になるので、4を見つけた時点で処理は終了します。

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(element => element > 3);
console.log(found); // 出力: 4

活用例②：オブジェクト配列の中から特定のプロパティを持つオブジェクトを取得

配列usersが持つオブジェクトの中でuser.name === 'Jane'、つまりキーnameがJaneの値を持つオブジェクトを取得しています。

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Jake' }
];
const user = users.find(user => user.name === 'Jane');
console.log(user); // 出力: { id: 2, name: 'Jane' }

活用例③：ネストされた配列を持つオブジェクトの取得

配列nestedArrayが持つオブジェクトの中で、キーがitemsの配列の中にorangeが含まれているオブジェクトを取得しています。

const nestedArray = [
  { id: 1, items: ['apple', 'banana'] },
  { id: 2, items: ['pear', 'orange'] }
];
const result = nestedArray.find(item => item.items.includes('orange'));
console.log(result); // 出力: { id: 2, items: ['pear', 'orange'] }

活用例④：複数の条件に該当するオブジェクトの取得

配列productsが持つオブジェクトの中で、priceが700よりも大きくかつnameがLapであるオブジェクトを取得しています。

const products = [
  { id: 1, name: 'Laptop', price: 1000 },
  { id: 2, name: 'Phone', price: 500 },
  { id: 3, name: 'Tablet', price: 750 }
];
const expensiveProduct = products.find(product => product.price > 700 && product.name.includes('Lap'));
console.log(expensiveProduct); // 出力: { id: 1, name: 'Laptop', price: 1000 }