kakureblog

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

JavaScript

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

投稿日:

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

前回に続いて今回もJavaScriptの配列でよく使うメソッドについてシリーズにして紹介していきます。

第2弾の今回はfilterメソッドを紹介します。

第1弾はこちらから!

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


filter()の基本文法

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

const filterGrammer = scores.filter((cur) => cur > 35)
console.log(filterGrammer) //👉 [40,60]

実行すると[40,60]が返ってきます。
curには配列内の数字が順番に入り、条件文(cur > 35)を満たす数字を集めて新たな配列を作ります。

例えば条件文が「35より上の数字」であれば、
最初は10が入るが、🙅‍♂️
次に20が入るが、🙅‍♂️
次に40が入り、35以上の数字であり条件を満たし、🙆‍♂️
次に30が入るが、🙅‍♂️
次に60が入り、こちらも条件を満たし、🙆‍♂️
ということで結果は[40, 60]となります。

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


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

filterメソッドは条件を満たすデータを集めて新たな配列にして返してくれます。
条件を作り”絞り込んだ”配列を作るわけですね。

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 filterMember = members.filter((member) => member.height > 160)
console.log(filterMember)

実施結果は、

[
 {name: 'Takashi', old: 18, gender: 'male', height: 180},
 { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
 { name: 'Jun', old: 32, gender: 'male', height: 165 }
]

となります。

これは、「member.height > 160」の条件を満たすデータを集め新たな配列を作っています。


参考:for文でも対応できるが…

for文でも配列を絞り込んで新たな配列を作ることはできます。

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 forFilter = [];
for(const member of members){
 if(member.height > 160){
  forFilter.push(member)
 }
}
console.log(forFilter) //filter()と同じ結果

for文を使うと少し記述量が増えてしまいますね。。
それほど気にする違いではないですが、filter()の方がシンプルで可読性も上がります。



今回は以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
次回も楽しみにしていてください。




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

【5分で理解①】JavaScriptの配列のfindメソッド基礎理解

-JavaScript
-, , , ,

執筆者:

関連記事

JS

【JS】8分で理解 deferとasyncを図で説明してみた【図解】

こんにちは。今回はJavaScript(以下JS)の「defer属性」と「async属性」について解説します。これらの属性を使うことでページの表示速度をあげることが出来るのでぜひ理解しましょう。早速、 …

JS

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

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

JS

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

第5弾はeveryメソッド

JS

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

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

JS

【5分で理解③ (配列編)】JavaScriptの配列のmapメソッドで繰り返し計算や指定要素だけ抽出

第3弾は繰り返し計算や指定要素だけ抽出する時に便利なmapメソッドです。

me

Taka

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