filterメソッドとは?
filter
メソッドは、JavaScriptの配列操作の中でも、特定の条件に合致する要素だけを抽出して新しい配列を作成するために使用されます。元の配列は変更されず、条件を満たした要素が新しい配列に含まれる点が特徴です。
filterメソッドの基本的な使い方
const numbers = [1, 2, 3, 4, 5];
// 偶数を抽出する
const evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
この例では、配列numbers
から偶数の要素だけを抽出して新しい配列evenNumbers
に格納しています。元の配列は変更されません。
filterメソッドの引数
filter
メソッドも、他の配列メソッドと同様にコールバック関数を引数に取り、コールバック関数内で3つの引数を使用できます。
- currentValue: 現在の要素の値
- index: 現在の要素のインデックス(オプション)
- array: メソッドが呼び出された配列そのもの(オプション)
インデックスを利用する例
const numbers = [1, 2, 3, 4, 5];
// インデックスを利用して偶数番目の要素を抽出
const evenIndexElements = numbers.filter(function(num, index) {
return index % 2 === 0;
});
console.log(evenIndexElements); // [1, 3, 5]
この例では、filter
メソッド内でインデックスを使用して、偶数番目の要素を抽出しています。結果として、新しい配列にはインデックスが0, 2, 4の要素が含まれています。
filterメソッドの利点
filter
メソッドの利点は、特定の条件に合致する要素のみを効率的に抽出できる点です。また、元の配列を変更せずに新しい配列を返すため、不変性を保ちながらデータの処理ができます。
filterメソッドの使用例
次に、文字列の配列を使って、特定の条件を満たす要素を抽出する例を紹介します。
特定の文字列を含む要素を抽出する例
const fruits = ["apple", "banana", "cherry", "grape"];
// "a"を含む要素を抽出
const fruitsWithA = fruits.filter(function(fruit) {
return fruit.includes("a");
});
console.log(fruitsWithA); // ["apple", "banana", "grape"]
この例では、配列fruits
から文字"a"
を含む要素だけを抽出しています。結果として、["apple", "banana", "grape"]
が新しい配列として返されます。
filterメソッドと他の配列メソッドの比較
filter
メソッドは、他の配列メソッドと似た動作をする場合もありますが、特定の条件に基づいて要素を抽出するという点で独自の役割を持っています。以下の表でfilter
メソッドと他の配列メソッドの違いを確認しましょう。
メソッド | 動作 | 返り値 | 元の配列に影響 |
---|---|---|---|
filter |
条件に合う要素を抽出 | 新しい配列 | 影響なし |
map |
各要素を変換 | 新しい配列 | 影響なし |
forEach |
各要素に対して関数を実行 | undefined |
影響なし |
まとめ
filter
メソッドは、JavaScriptにおける配列操作で、特定の条件に基づいて要素を抽出する強力な方法です。元の配列に影響を与えずに新しい配列を作成するため、不変性を保ちながら必要なデータだけを取り出すことができます。さまざまな条件に基づいた抽出を行うことで、効率的な配列操作が可能になります。