filter() メソッドによる配列のフィルタリング
メニューを表示するにはスワイプしてください
この章では、filter() メソッドの詳細について解説し、その構文、用途、および洗練された配列の作成をどのように支援するかを説明します。
filter()
filter() メソッドは、特定の条件を満たす要素を選択します。構文は次のとおりです:
array.filter((element, index, array) => {
// Callback body
});
filter() メソッドについて知っておくべきこと:
- 元の配列を変更しない;
- 元の配列を要素ごとに反復処理する;
- 新しい配列を返す;
- コールバック条件を満たす要素が新しい配列に追加される;
- コールバックが true を返す場合、その要素が含まれ、そうでない場合は除外される。
例
filter() メソッドの真の実力は、多様なシナリオに適用したときに明らかになります。いくつかの例を見てみましょう:
例 1: 奇数の抽出
この例では、filter() メソッドを使用して、元の配列から奇数のみを含む配列(oddNumbers)を作成します。
123456const numbers = [15, 22, 37, 41, 58, 67, 72]; const oddNumbers = numbers.filter((number) => { return number % 2 !== 0; }); console.log(oddNumbers); // Output: 15, 37, 41, 67
例2:価格帯による商品のフィルタリング
ここでは、filter() メソッドを使用して価格が500ドル未満の商品を抽出し、新しい配列(affordableProducts)を作成します。
const products = [
{ name: "Keyboard", price: 220 },
{ name: "Smartphone", price: 800 },
{ name: "Tablet", price: 500 },
{ name: "Headphones", price: 120 },
{ name: "Camera", price: 1500 },
];
const affordableProducts = products.filter((product) => product.price < 500);
console.log(affordableProducts); // Output: [ { name: "Keyboard", price: 220 }, { name: "Headphones", price: 120 } ]
1. filter() メソッドは何をしますか?
2. filter() メソッドの主な特徴は何ですか?
3. 次の例で、numbersGreaterThan20 配列に 20 より大きい数値のみが含まれるようにするには、どのような条件を指定すればよいですか?
すべて明確でしたか?
フィードバックありがとうございます!
セクション 5. 章 3
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 5. 章 3