filter()

条件に合う要素だけを取り出す

配列の要素のうち、関数が true を返したものだけを集めた新しい配列を作ります。検索や絞り込みに使います。

種類: 配列のメソッド
戻り値: 新しい配列（0個以上）
元の配列: 変更しない

サンプルコード

1const menu = [

2 { name: 'ブレンド', price: 480 },

3 { name: 'カフェラテ', price: 550 },

4 { name: 'ケーキセット', price: 900 },

5];

7const cheap = menu.filter((m) => m.price < 600);

8console.log(cheap.map((m) => m.name));

9console.log(cheap.length + '件');

実行結果

コンソール

console.log() の出力がここに表示されます

解説

filter() は、要素ごとに関数を実行し、true を返した要素だけを残した新しい配列を返します。

上の例では、価格が600円未満の商品だけを取り出し、map() で名前の一覧に変換しています。このようにメソッドをつなげて書けるのも配列メソッドの便利な点です。

1件も当てはまらないときは空の配列 [] が返ります。最初の1件だけが欲しいときは find() を使います。

応用例・注意点

似たメソッド

メソッド	説明
`filter()`	条件に合う要素をすべて配列で返す
`find()`	条件に合う最初の要素を返す（ないと undefined）
`some()`	1つでも合えば true
`every()`	すべて合えば true
`includes()`	特定の値が含まれるか

入力した文字で絞り込む

入力欄の文字を含む項目だけを表示します。

HTML

1<input id="q" placeholder="絞り込み">

2<ul id="list"></ul>

1const words = ['margin', 'padding', 'gap', 'grid'];

2const list = document.querySelector('#list');

3const render = (q) => {

4 list.innerHTML = '';

5 words.filter((w) => w.includes(q)).forEach((w) => {

6 const li = document.createElement('li');

7 li.textContent = w;

8 list.append(li);

9 });

10};

11document.querySelector('#q').addEventListener('input', (e) => render(e.target.value));

12render('');

注意点

01関数は true / false を返すように書きます。
02大文字・小文字を区別せずに探すときは、両方を toLowerCase() でそろえてから比べます。