JavaScript 配列の「filter() 」メソッド☺️

こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「filter() メソッド」についてお伝えしていきます。

filter() メソッドは、特定の条件にマッチする要素を抽出し、それらを新しい配列として返すJavaScriptの配列メソッドです。

filter()の構文

array.filter(callback(element[, index[, array]])[, thisArg])

このメソッドには以下の要素があります。

⚫️array : フィルタリングする対象の配列

⚫️callback : 配列内の各要素に対して実行される関数。

この関数はelement、index(オプション)、およびarray(オプション)の 3 つの引数を取ります。

⚫️thisArg(オプション): コールバック関数を実行する際に使用する値。

このように、filter() メソッドは指定されたコールバック関数に基づいて要素をフィルタリングし、、新しい配列を作成いたします。

使用例

例のコードでは、filter() メソッドを使用して整数配列から偶数の要素を抽出する方法です。

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

const evenNumbers = numbers.filter((element) => {
  return element % 2 === 0;
});

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

1 numbers という配列が定義しています。

2 filter() メソッドが使われていて、新しい配列evenNumbersが作成されます。

この配列は、元のnumbers配列から特定の条件を満たす要素だけを含みます。

3 コールバック関数は (element) => { return element % 2 === 0; } です。

この関数は、各要素が条件 element % 2 === 0 を満たすかどうかをチェックします。

この条件は、要素が偶数であるかどうかを確認します。

4 最後に、console.log(evenNumbers);によって、evenNumbers配列がコンソールに表示されます。

実際の使用例

データフィルタリング

特定の基準に合致するデータを抽出できます。

例えば、ある価格帯内の商品を抽出する場合、商品の価格がその価格帯に該当するかどうかを基準としてfilter() を使用します。

const products = [
  { name: 'Product A', price: 25 },
  { name: 'Product B', price: 30 },
  { name: 'Product C', price: 15 },
  // ...
];

const filteredProducts = products.filter((product) => product.price >= 20 && product.price <= 30);

不要な要素の削除

配列から特定の条件に合致しない要素を削除する際に filter() を使用できます。

例えば、空の文字列や null 値を含む要素を取り除くことができます。

const data = [1, null, 2, '', 3, undefined, 4];

const filteredData = data.filter((item) => item !== null && item !== undefined && item !== '');

配列のクリーンアップ

配列から空の値や不要な要素を取り除くために filter() を使用できます。

これは、データの前処理やクリーニングに役立ちます。

const values = [10, 0, 5, null, '', 20, undefined];

const cleanedValues = values.filter((value) => value !== null && value !== undefined && value !== '');

`filter()`製品の配列に使用

この例は filter() メソッドを使用して、指定された条件（価格が 30 未満）を満たす商品の配列を作成しています。

const products = [
  {
    id: 1,
    name: 'item 1',
    price: 29.99,
    description: "Product 1",
    category: "Electronics"
  },
  {
    id: 2,
    name: 'item 2',
    price: 19.95,
    description: "Product 2",
    category: "Clothing"
  },
  {
    id: 3,
    name: 'item 3',
    price: 49.99,
    description: "Product 3",
    category: "Home Decor"
  },
  {
    id: 4,
    name: 'item 4',
    price: 9.99,
    description: "Product 4",
    category: "Kitchen"
  }
];

const affordableProducts = products.filter((product) => {
  return product.price < 30;
});

console.log(affordableProducts);