MENU
  1. ホーム
  2. JavaScript
  3. Javascript応用
  4. 【JavaScript】Arrayクラスのfilter()メソッドについて

【JavaScript】Arrayクラスのfilter()メソッドについて

Javascript応用

JavaScriptのfilter()メソッドは、配列内の要素を指定された条件に基づいてフィルタリングするための便利なメソッドです。このメソッドを使用すると、与えられた関数の条件を満たす要素だけを含む新しい配列が作成されます。本記事では、filter()メソッドの基本的な使い方から応用例まで詳しく解説します。

目次

Arrayクラスのfilter()メソッドの基本構文

filter()メソッドの基本的な構文は以下の通りです：

array.filter(callback(element, index, array), thisArg);
  • callback: 各要素に対して実行される関数。以下の引数を受け取ります：
    • element: 現在処理されている要素。
    • index (オプション): 現在処理されている要素のインデックス。
    • array (オプション): filter()メソッドが呼び出された配列。
  • thisArg (オプション): callbackが参照するthisの値。

filter()メソッドは、条件を満たす要素のみを含む新しい配列を返します。

Arrayクラスのfilter()メソッドの基本的な使い方

条件を満たす要素のフィルタリング

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

const evenNumbers = array.filter(number => number % 2 === 0);
console.log(evenNumbers); // 出力: [2, 4]

この例では、与えられた配列から偶数の要素だけをフィルタリングして新しい配列を作成しています。

Arrayクラスのfilter()メソッドの要素のインデックスを使用する

filter()メソッドのコールバック関数には、第2引数として要素のインデックスを取ることができます。

const array = ['a', 'b', 'c', 'd', 'e'];

const filterByIndex = (value, index) => index % 2 === 0;

const filteredArray = array.filter(filterByIndex);
console.log(filteredArray); // 出力: ['a', 'c', 'e']

この例では、インデックスが偶数の要素だけをフィルタリングしています。

Arrayクラスのfilter()メソッドのコールバック関数内でthisを使用する

filter()メソッドの第2引数にthisArgを指定することで、コールバック関数内でthisを使用することができます。

const context = {
  threshold: 3
};

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

const filterByThreshold = function(element) {
  return element > this.threshold;
};

const filteredArray = array.filter(filterByThreshold, context);
console.log(filteredArray); // 出力: [4, 5]

この例では、contextオブジェクト内のthresholdプロパティを使って、指定された閾値より大きい要素だけをフィルタリングしています。

Arrayクラスのfilter()メソッドの注意点

  • filter()メソッドは、条件を満たす要素だけを含む新しい配列を返します。
  • 元の配列は変更されず、新しい配列が作成されます。

まとめ

filter()メソッドは、指定された条件に基づいて配列内の要素をフィルタリングするための便利なメソッドです。この記事を参考にして、filter()メソッドを効果的に活用してください。

Javascript応用
目次