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