などの疑問や悩みを解決してまいります。
取得したデータからある条件に一致した値だけを取り出したいということは開発において多いと思います。
そんなときに役立つのがArray
のfind
メソッドです。
今回は配列から特定の条件に一致する要素を取得する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'
、つまりキー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 }
条件に一致する要素が見つからない場合
find
メソッドは、条件に一致する要素が見つからない場合にundefined
を返します。
undefined
である場合のエラーハンドリングが必要になります。まとめ
ここまで読んでいただきありがとうございました。本記事のまとめです。
ポイント
find
メソッドとは、配列要素の中から特定の条件に一致した最初の要素を取得することができるfind
メソッドは、条件に一致する要素が見つからない場合にundefined
を返す