条件に合う1件を探す

01 / 05

最初の1件だけ知りたい

「80 点以上の人をひとり見つけたい」「在庫が切れている商品をひとつ見つけたい」。こういうとき欲しいのは最初に見つかった1件だけだよね。

forEach は全要素を必ず処理するから、この用途には向いていない。専用のメソッドを使おう。

02 / 05

find には条件を渡す

forEach に渡したのは「やること」の関数だった。find に渡すのは条件の関数だよ。

渡す関数は true か false を return する形で書く。find はその関数を先頭から順に試して、はじめて true になった要素を返してくれる。

const nums = [4, 9, 12, 7];const isBig = (n) => {  return n >= 8;};console.log(nums.find(isBig));

実行結果

03 / 05

返ってくるのは要素そのもの

find が返すのは true / false ではなく、条件に合った要素そのもの。

だから変数に受け取って、そのまま計算にも表示にも使えるよ。

const prices = [80, 150, 300];const isHigh = (p) => {  return p >= 100;};const found = prices.find(isHigh);console.log(found);console.log(found * 2);

実行結果

150
300

04 / 05

見つからないと undefined

条件に合う要素が1つも無いときは undefined が返る。

受け取ってから if で確かめれば、「見つからなかったとき」の処理も書けるよ。

const nums = [1, 2, 3];const isBig = (n) => {  return n >= 8;};const found = nums.find(isBig);console.log(found);if (found === undefined) {  console.log("みつからなかった");}

実行結果

undefined
みつからなかった

05 / 05

オブジェクトの配列から探す

find が本当に活きるのは、オブジェクトの配列から1件を探すとき。条件の中で . を使ってプロパティを見ればいいよ。

返ってくるのはオブジェクトまるごと。だから見つけたあと、名前も年齢も両方使える。

それじゃあ、探してみよう。

const members = [  { name: "ゆい", age: 12 },  { name: "かい", age: 15 },];const isTeen = (m) => {  return m.age >= 13;};console.log(members.find(isTeen));

実行結果

{ name: "かい", age: 15 }