JavaScript filter とは？

filter の基本的な使い方

filter メソッドは、以下の構文で呼び出します。

const filteredArray = array.filter(callbackFn);

• array: フィルター処理する配列
• callbackFn: 各要素に対して呼び出される関数
• filteredArray: フィルター処理後の新しい配列

callbackFn は、各要素に対して 真偽値を返す関数 です。

• 真偽値が true の場合、その要素は新しい配列に含まれます。
• 真偽値が false の場合、その要素は新しい配列に含まれません。

例

以下の例では、numbers 配列から偶数だけを抽出するコードを示します。

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

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

console.log(evenNumbers); // [2, 4]

このコードでは、callbackFn は number % 2 === 0 という式を返します。これは、number が偶数であれば true を、奇数であれば false を返します。

filter のその他の使い方

filter メソッドは、さまざまな目的に使用できます。

• 特定の条件に合致する要素だけを抽出する
• 要素を変換する
• 配列をソートする

特定の条件に合致する要素だけを抽出する

const users = [
    { name: "John", age: 30 },
    { name: "Mary", age: 25 },
    { name: "Bob", age: 40 },
];
const youngUsers = users.filter(user => user.age < 30); console.log(youngUsers);
// [{ name: "John" , age: 30 }, { name: "Mary" , age: 25 }]

このコードでは、users 配列から年齢が30歳未満のユーザーだけを抽出しています。

要素を変換する

const products = [
    { name: "Product 1", price: 100 },
    { name: "Product 2", price: 200 },
    { name: "Product 3", price: 300 },
];

const discountedProducts = products.map(product => ({
...product,
price: product.price * 0.9,
}));

console.log(discountedProducts);

このコードでは、products 配列の各商品の価格を10%割引した新しい配列を作成しています。

配列をソートする

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

const sortedNumbers = numbers.sort((a, b) => a - b);

console.log(sortedNumbers); 
// [1, 2, 3, 4, 5]

このコードでは、numbers 配列を昇順にソートしています。

まとめ

JavaScript filter は、配列の要素をフィルター処理するための便利なメソッドです。さまざまな目的に使用できるため、ぜひマスターしましょう。