filterによる要素の抽出 | 高度な配列メソッド | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

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における配列操作で、特定の条件に基づいて要素を抽出する強力な方法です。元の配列に影響を与えずに新しい配列を作成するため、不変性を保ちながら必要なデータだけを取り出すことができます。さまざまな条件に基づいた抽出を行うことで、効率的な配列操作が可能になります。