今回は、JavaScriptの配列メソッドである filter() について解説します。
filter() は、配列の中から条件に合う要素だけを残して、新しい配列を作るメソッドです。
filter() の使い方
基本形
const 新しい配列 = 元の配列.filter(item => 条件)
例えば、次のように使用します。
const result = numbers.filter(number => number >= 3)
filter() は、配列の要素を1つずつ受け取り、それぞれが条件に合うかを確認します。
条件の結果が次のように処理されます。
-
true：新しい配列に残す -
false：新しい配列から除外する
数字の例
const numbers = [1, 2, 3, 4, 5]
const result = numbers.filter(number => number >= 3)
console.log(result)
// [3, 4, 5]
内部では、次のように条件が確認されています。
1 >= 3 // false → 除外
2 >= 3 // false → 除外
3 >= 3 // true → 残す
4 >= 3 // true → 残す
5 >= 3 // true → 残す
文字列の例
const fruits = ['apple', 'banana', 'kiwi']
const result = fruits.filter(fruit => fruit.length >= 5)
console.log(result)
// ['apple', 'banana']
このコードでは、fruits 配列の要素を1つずつ fruit という変数で受け取ります。
fruit = 'apple'
fruit = 'banana'
fruit = 'kiwi'
そして、それぞれに対して次の条件を確認します。
fruit.length >= 5
文字数が5文字以上なら true となり、新しい配列 result に残ります。
'apple'.length >= 5 // true → 残す
'banana'.length >= 5 // true → 残す
'kiwi'.length >= 5 // false → 除外
なお、fruit という変数名は自由に変更できます。
例えば、次のコードも文法的には問題ありません。
const result = fruits.filter(
yadokari => yadokari.length >= 5
)
ただし、yadokari では何を表している変数なのか分かりにくく、可読性が下がります。
そのため、基本的には配列名に対応する単数形を使うと分かりやすくなります。
fruits.filter(fruit => ...)
users.filter(user => ...)
todos.filter(todo => ...)
numbers.filter(number => ...)
次の形で覚えると分かりやすいです。
配列.filter(要素を受け取る変数 => 残す条件)
また、filter() は元の配列を直接変更しません。条件に合う要素を集めた、新しい配列を返します。