find と includes で探す
このレッスンで分かること
findは条件に合う最初の要素を返し、無ければundefinedになります- 有無だけ知りたいときは
includesかsomeを使います
探すたびに for と if を 6 行書く
オブジェクトの配列が扱えるようになると、次に欲しくなるのは検索です。ここまでの知識だけでも書けます。
JavaScript
function findByLevel(skills, level) {
for (const skill of skills) {
if (skill.level === level) {
return skill;
}
}
return undefined;
}動きますし読めます。ただ「配列から条件に合うものを 1 つ探す」はあまりにありふれた処理なので、専用のメソッドが最初から用意されています。
JavaScript
const skills = [
{ label: "HTML", level: 3 },
{ label: "CSS", level: 2 },
];
console.log(skills.find((skill) => skill.level === 2));
// { label: "CSS", level: 2 }find は第6章で覚えたコールバック関数を受け取り、要素を 1 つずつ渡してきます。コールバックが true を返した瞬間に走査を止めてその要素を返し、最後まで当たらなければ undefined を返します。100 件のうち 3 件目が当たれば、残りの 97 件は見に行きません。自分で for と return を書いたときと同じ効率です。
何が返ってきてほしいかで選ぶ
似た名前が並んでいるので、先に全体像を押さえます。
| メソッド | 渡すもの | 戻り値 | 見つからないとき |
|---|---|---|---|
find(fn) | 条件の関数 | 要素そのもの | undefined |
findIndex(fn) | 条件の関数 | 位置の数値 | -1 |
includes(値) | 値そのもの | 真偽値 | false |
some(fn) | 条件の関数 | 真偽値 | false |
分かれ目は 2 つです。条件で探すのか値そのもので探すのか、そして何が返ってきてほしいのか。この 2 軸で選べば迷いません。
JavaScript
console.log(["HTML", "CSS"].includes("CSS")); // true
console.log(skills.includes({ label: "CSS", level: 2 })); // false
console.log(skills.some((skill) => skill.label === "CSS")); // trueincludes は値そのものを渡して有無を判定します。ただしオブジェクトの配列では使えません。前のレッスンのとおり、見た目が同じでも置き場所が違えば別物と判定されるからです。オブジェクトの配列に対しては、条件で探す some を選びます。
見つからなかったときの戻り値が、道具ごとに違う
undefined と -1 と false。ここが最大の注意点です。find の戻り値は undefined になり得るので、そのままプロパティを読むと止まります。
JavaScript
const hit = skills.find((skill) => skill.label === "React");
console.log(hit.level); // TypeError で止まる
console.log(hit?.level ?? 0); // 0 前のレッスンの ?. が効く判定に使うなら find の結果を if にそのまま入れるのが素直です。見つかればオブジェクト、見つからなければ undefined なので、そのまま真偽の判定になります。
よくある間違い
findIndexの戻り値をifにそのまま入れる — 先頭で見つかった0は falsy、見つからなかった-1は truthy です。判定が両方とも裏返ります。!== -1と書いて区別してください- オブジェクトの配列に
includesを使う — 何を渡してもfalseになります。条件で探すsomeかfindに置き換えます
要件
- 関数名は
findWorkByTitle、引数はworksとtitleの 2 つ findを使い、work.titleが引数のtitleと一致する要素を返すこと- 比較は
===の厳密比較で行うこと - 見つからないときと空配列のときは
undefinedを返すこと
入出力例
findWorkByTitle([{"title":"プロフィールサイト","year":2026},{"title":"自己紹介カード","year":2026},{"title":"スキル一覧の表","year":2026}], "自己紹介カード") → {"title":"自己紹介カード","year":2026}
findWorkByTitle([{"title":"プロフィールサイト","year":2026},{"title":"自己紹介カード","year":2026}], "プロフィールサイト") → {"title":"プロフィールサイト","year":2026}
findWorkByTitle([{"title":"プロフィールサイト","year":2026}], "ブログ") → null
findWorkByTitle([], "プロフィールサイト") → nullヒント
編集 ゆめさく編集部