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

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

filterメソッドとは？

filter()メソッドは、配列の中から指定した条件を満たす要素だけを取り出して、新しい配列を作成するためのメソッドです。

元の配列は変更されず、条件に一致した要素だけが新しい配列に格納されます。そのため、データを安全に加工できるメソッドとしてよく利用されています。

filterメソッドの基本的な使い方

const numbers = [1, 2, 3, 4, 5];

// 偶数だけを抽出する
const evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});

console.log(evenNumbers);
console.log(numbers);

実行結果

[2, 4]
[1, 2, 3, 4, 5]

この例では、配列numbersから偶数だけを抽出しています。元の配列は変更されず、そのまま残っています。

1. filter()は配列の各要素を順番に処理します。
2. コールバック関数がtrueを返した要素だけが新しい配列へ追加されます。
3. falseを返した要素は除外されます。

filterメソッドの構文

array.filter(function(currentValue, index, array) {
    return 条件式;
});

アロー関数を使うと、より簡潔に記述できます。

const evenNumbers = numbers.filter(num => num % 2 === 0);

コールバック関数の引数

filter()のコールバック関数では、次の3つの引数を利用できます。

• currentValue：現在処理している要素
• index：現在のインデックス（省略可能）
• array：元の配列（省略可能）

インデックスを利用する例

const numbers = [1, 2, 3, 4, 5];

// 偶数番目（0,2,4）の要素だけ取得
const evenIndexElements = numbers.filter(function(num, index) {
    return index % 2 === 0;
});

console.log(evenIndexElements);

実行結果

[1, 3, 5]

この例では、インデックス番号を利用して要素を抽出しています。

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"]

includes()がtrueを返した要素だけが新しい配列へ追加されています。

オブジェクト配列を抽出する例

filter()はオブジェクトの配列でも非常によく利用されます。

const users = [
    { name: "Alice", age: 20 },
    { name: "Bob", age: 17 },
    { name: "Charlie", age: 25 }
];

const adults = users.filter(function(user) {
    return user.age >= 18;
});

console.log(adults);

実行結果

[
  { name: "Alice", age: 20 },
  { name: "Charlie", age: 25 }
]

このように、条件に一致するオブジェクトだけを簡単に取り出すことができます。

filterメソッドと他の配列メソッドの違い

初心者がつまずきやすいポイント

• filter()は条件に一致するすべての要素を取得します。
• 一致する要素がない場合は空の配列[]が返されます。
• 元の配列は変更されません。
• 1件だけ取得したい場合はfind()を使うほうが適しています。

まとめ

• filter()は条件に一致する要素だけを抽出するメソッドである。
• 元の配列は変更されず、新しい配列が返される。
• コールバック関数がtrueを返した要素だけが残る。
• 文字列・数値・オブジェクト配列など幅広く利用できる。
• 1件だけ取得したい場合はfind()との使い分けを覚えておくと便利である。