JavaScriptのfind()メソッドは、配列の中から条件に一致する最初の要素を取得するためのメソッドです。今回は、find()の基本的な使い方から使用時の注意点までをまとめていきたいと思います。
目次 非表示
find()メソッドは、指定した条件を満たす最初の要素を返します。
JavaScript
array.find((要素, インデックス, 配列) => 条件);- 要素（currentValue）：現在処理中の要素
- インデックス（index）（省略可能）：現在の要素のインデックス
- 配列（array）（省略可能）：処理中の元の配列
- 条件に一致する最初の要素を返します。
- 一致する要素がない場合は
undefinedを返します。
JavaScript
let numbers = [10, 20, 30, 40, 50];
let result = numbers.find(num => num > 25);
console.log(result); // 30num > 25という条件に最初に一致する30を返します。find()は最初に一致した要素のみを返すため、30以降の40や50は検索対象外になﾘ、console.logには30が表示されます。
JavaScript
let users = [
{ id: 1, name: 'Alex' },
{ id: 2, name: 'Jordan' },
{ id: 3, name: 'Taylor' }
];
let user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jordan' }id === 2のユーザーを探し、最初に一致する{ id: 2, name: "Jordan" }を返します。
JavaScript
let numbers = [1, 3, 5, 8, 10];
let evenNumber = numbers.find(num => num % 2 === 0);
console.log(evenNumber); // 8最初の偶数(8)を見つけた時点で処理が終了します。
JavaScript
let drinks = ['coffee', 'cafe latte', 'espresso'];
let result = drinks.find(drink => drink === 'water');
console.log(result); // undefined配列内に"water"が存在しないため、undefinedが返されます。
JavaScript
let numbers = [5, 10, 15, 20, 10];
let result = numbers.find(num => num === 10);
console.log(result); // 10find()は 最初の一致する要素のみを返すため、2つ目の10は無視されます。複数の要素を取得したい場合は filter()を使用しましょう。
JavaScript
let results = numbers.filter(num => num === 10);
console.log(results); // [10, 10]
【JavaScript】filter – 特定の条件に合致する要素だけを抽出
JavaScript
let numbers = [1, 3, 5, 7];
let result = numbers.find(num => num % 2 === 0);
console.log(result ?? "見つかりませんでした"); // 見つかりませんでした条件に一致する要素がない場合、undefinedとなるため、??（Null合体演算子）でデフォルト値を設定しています。
