Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ filter() メソッドによる配列のフィルタリング | 高度な配列メソッドと変換
JavaScriptデータ構造

bookfilter() メソッドによる配列のフィルタリング

メニューを表示するにはスワイプしてください

この章では、filter() メソッドの詳細について解説し、その構文、用途、および洗練された配列の作成をどのように支援するかを説明します。

filter()

filter() メソッドは、特定の条件を満たす要素を選択します。構文は次のとおりです:

array.filter((element, index, array) => {
  // Callback body
});

filter() メソッドについて知っておくべきこと:

  • 元の配列を変更しない;
  • 元の配列を要素ごとに反復処理する;
  • 新しい配列を返す;
  • コールバック条件を満たす要素が新しい配列に追加される;
  • コールバックが true を返す場合、その要素が含まれ、そうでない場合は除外される。

filter() メソッドの真の実力は、多様なシナリオに適用したときに明らかになります。いくつかの例を見てみましょう:

例 1: 奇数の抽出

この例では、filter() メソッドを使用して、元の配列から奇数のみを含む配列(oddNumbers)を作成します。

123456
const 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
copy

例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 より大きい数値のみが含まれるようにするには、どのような条件を指定すればよいですか?

question mark

filter() メソッドは何をしますか?

正しい答えを選んでください

question mark

filter() メソッドの主な特徴は何ですか?

正しい答えを選んでください

question mark

次の例で、numbersGreaterThan20 配列に 20 より大きい数値のみが含まれるようにするには、どのような条件を指定すればよいですか?

正しい答えを選んでください

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 5.  3

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 5.  3
some-alt