こんにちは。
大阪でフロントエンド兼マネージャー兼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 ‘の違いを解説