CODE JavaScript

【5分で理解① (配列編)】JavaScriptの配列のfindメソッド基本理解

こんにちは。
大阪でフロントエンド兼マネージャー兼Webチームの採用担当をしている筆者です😃

今回からJavaScriptの配列でよく使うメソッドについてシリーズにして紹介していきます。
合計7つの記事を書く予定です。

JavaScript(以下JS)を理解する上で配列は必須の項目です。
配列には多くのメソッドがあり、それらは便利でコードの可読性を上げてくれるのですが、覚えるのが大変です。
私自身も覚えるのに苦労しましたが、使えるようになるとJSの表現幅?が広がったと感じます。

各記事さっと理解できるよう5分ほどで読めるようにまとめて書いていきます。
たった7つです。忘れた時にいつでも戻ってきてください。

では、、
第一弾の今回はfindメソッドを紹介します。


find()の基本文法

const scores = [10, 20, 40, 30, 60];

const findGrammer = scores.find((cur) => cur >= 35)
console.log(findGrammer) //👉 40

実行すると40が返ってきます。
curには配列内の数字が順番に入り、条件文(cur >= 35)を満たす数字が見つかるまで配列内の数字を入れ続けます。

例えば条件文が「35以上の数字」であれば、
最初は10が入るが、🙅‍♂️
次に20が入るが、🙅‍♂️
次に40が入り、35以上の数字であり条件を満たし、🙆‍♂️
ということで40が返ってきます。

60も条件を満たしますが、すでに条件を満たす数字(40)が見つかってしまったので60はアウト。

find()には第2引数、第3引数も入れる事ができますが今回は割愛します。


find()は何をしてくれる?

findメソッドは文字通り配列の中から条件にあったデータを見つけ出します。

const members = [
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
];

const findMember = members.find((member) => member.old === 17)
console.log(findMember)

実施結果は、
{ name: 'Hitomi', old: 17, gender: 'female', height: 163 }
となります。

これは、「member.old === 17」の条件と一致しているデータを持ってきています。


find()は最初の一つの要素しか見つけられない

注意点としてfind()で指定した条件が複数の要素で満たされている時は最初の1つしか抽出されません。

const findMember = members.find((member) => member.gender === 'male')

この時の実行結果は、
{ name: 'Takashi', old: 18, gender: 'male', height: 180 }
となります。
{ name: 'Jun', old: 32, gender: 'male', height: 165 }も条件に当てはまりますが2番目の要素なので省かれてしまいます。


今回は以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
では!




▼▼あわせて読みたいの記事▼▼

【JS】イベントリスナー' DOMContentLoaded 'と' load 'の違いを解説

-CODE, JavaScript
-, , , ,