概要
filter()は Array インスタンスのメソッドで、配列の各要素をコールバック関数で判定し、条件を満たす要素だけを残した新しい配列を返します。
つまり、
-
filterは「配列から条件に合う要素を抽出」
の役割を担うインスタンスメソッドです。
目次
基本構文
JavaScript
// filter: 配列の要素を条件で抽出
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(x => x % 2 === 0);
console.log(evens);
// 出力結果 [2, 4]
- 対象: 配列
- 戻り値: 条件を満たす要素だけの新しい配列
- 用途: 配列の要素を絞り込みたいとき
filterの特徴
- コールバック関数は filter の中で自動的に呼ばれる関数
- 配列の各要素、インデックス、元配列の3つの情報を引数として受け取れる
JavaScript
array.filter((element, index, array) => condition);
| 引数 | 説明 |
|---|---|
element |
配列の現在処理中の要素 |
index |
配列内の現在の要素のインデックス（配列の要素の順番を表す番号） |
array |
filter を呼んだ元の配列 |
elementだけを使うことも多いです。
活用例
1. 数字の条件で抽出
JavaScript
const numbers = [1, 2, 3, 4, 5];
// 偶数だけ抽出
const evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]
// 2より大きく、5未満の数字
const middle = numbers.filter(x => x > 2 && x < 5);
console.log(middle); // [3, 4]
2. インデックスや元配列を参照
JavaScript
const numbers = [10, 20, 30, 40, 50];
// インデックスが偶数かつ値が25以上
const result = numbers.filter((x, i) => x > 25 && i % 2 === 0);
console.log(result); // [30, 50]
3. 他の配列に含まれない要素を抽出
JavaScript
const a = [1, 2, 3, 4, 5];
const b = [2, 4];
const diff = a.filter(x => !b.includes(x));
console.log(diff); // [1, 3, 5]
4. 文字列の条件で抽出
JavaScript
const words = ["apple", "banana", "cherry"];
// "a"を含む単語を抽出
const withA = words.filter(word => word.includes("a"));
console.log(withA); // ["apple", "banana"]
5. 外部関数を利用した抽出
JavaScript
function isLargeOdd(num) {
return num > 10 && num % 2 !== 0;
}
const numbers = [5, 12, 15, 20];
const result = numbers.filter(isLargeOdd);
console.log(result); // [15]