条件に合うものを集める

01 / 05

合うもの全部が欲しい

find は最初の1件を返してくれた。でも「合格者を全員知りたい」「在庫がある商品を全部並べたい」というときは1件じゃ足りないよね。

for と push を組み合わせれば書けたけれど、専用のメソッドを使えばもっと短くなるよ。

02 / 05

filter は新しい配列を返す

filter に渡すのは find と同じ条件の関数。違うのは返るものだよ。

find … 条件に合った最初の1件
filter … 条件に合った要素を集めた新しい配列

条件で「ふるいにかける」イメージだね。

const nums = [4, 9, 12, 7];const isBig = (n) => {  return n >= 8;};console.log(nums.filter(isBig));

実行結果

[9, 12]

03 / 05

元の配列は変わらない

filter は新しい配列を作って返すだけ。元の配列はそのまま残るよ。

返るのは配列なので、.length で件数を数えたり、番号で取り出したりできる。

const scores = [45, 82, 60];const isPass = (s) => {  return s >= 60;};const passed = scores.filter(isPass);console.log(passed);console.log(passed.length);console.log(scores);

実行結果

[82, 60]
2
[45, 82, 60]

04 / 05

0件なら空の配列

条件に合う要素が1つも無いときは、undefined ではなく空の配列 [] が返る。

ここが find との違い。filter は「集めた結果」を返すので、集まらなかったら中身ゼロの配列になるんだ。

const nums = [1, 2, 3];const isBig = (n) => {  return n >= 8;};const big = nums.filter(isBig);console.log(big);console.log(big.length);

実行結果

[]
0

05 / 05

オブジェクトの配列をしぼる

filter の使いどころで多いのが、オブジェクトの配列から条件に合う分だけ取り出すこと。

集めたあとは forEach で1件ずつ表示してもいいし、.length で件数を出してもいい。

それじゃあ、しぼり込んでみよう。

const items = [  { name: "ペン", count: 3 },  { name: "ノート", count: 0 },];const inStock = (item) => {  return item.count > 0;};console.log(items.filter(inStock));

実行結果

[{ name: "ペン", count: 3 }]