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

JavaScript

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

なやむくん
配列から条件に一致する要素を1つ取得したい…。
なやむさん
配列操作について詳しく知りたい…。

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

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

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

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

なやむくん
配列操作は難しくて苦手です…。
みつた
活用例も交えながら分かりやすく解説していきますね!

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'、つまりキーnameJaneの値を持つオブジェクトを取得しています。

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が持つオブジェクトの中で、price700よりも大きくかつnameLapであるオブジェクトを取得しています。

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 }

条件に一致する要素が見つからない場合

findメソッドは、条件に一致する要素が見つからない場合undefinedを返します。

みつた
そのため、結果がundefinedである場合のエラーハンドリングが必要になります。

まとめ

ここまで読んでいただきありがとうございました。本記事のまとめです。

ポイント

  • findメソッドとは、配列要素の中から特定の条件に一致した最初の要素を取得することができる
  • findメソッドは、条件に一致する要素が見つからない場合undefinedを返す
  • この記事を書いた人
  • 最新記事

みつた

完全未経験&異業種から30歳の年でIT企業に転職。

Web系開発言語が好き。
どちらかというとバックエンドよりもフロントエンドが好き(現時点では…)

最近はサウナと観葉植物にハマっている。
野球が好きで一応投手。

-JavaScript