kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

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 ‘の違いを解説

-JavaScript
-, , , ,

執筆者:

関連記事

JS

【5分で理解⑤ (配列編)】JavaScriptの配列のeveryメソッド ーsomeメソッドとの違いー

第5弾はeveryメソッド

JS

【5分で理解②(配列編)】JavaScriptの配列のfilterメソッドで配列要素を”絞り込む”

第2弾は配列内データを検索する時に便利なfiterメソッドです。

JS

【5分で理解④ (配列編)】JavaScriptの配列のsomeメソッドで配列内に”存在確認”

第4弾は配列内の存在の有無を確認する時に便利なsomeメソッド

JS

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

こんにちは。今回はJavaScript(以下JS)のロード系?のイベントリスナーについて書きたいと思います。 ・DOMContentLoaded・load これらのイベントリスナーはJSを学習しはじめ …

JS

【JavaScript】if文の基本から応用までを網羅。初心者・ド忘れした方にオススメ

こんにちは。今回はJavaScript(以下JS)の基本公文の一つであるif文について書いていきます。時間、計算、大小関係などの様々な条件で処理を変えたり、コンテンツの表示を変えたりと何かとよく使うi …

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。