こんにちは。
大阪でフロントエンド兼マネージャー兼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メソッド基礎理解