JavaScript Array Filter() メソッドのガイド

JavaScript の filter() メソッドは、配列内の要素ごとにコールバック関数を 1 回呼び出す反復メソッドです。 コールバック関数が true を返す場合、その要素は戻り配列に含まれます。 filter() メソッドは、元の配列の要素と同じ要素を含む配列の浅いコピーを返すため、コピー メソッドとも呼ばれます。

JavaScript の array filter() メソッドを使用すると、配列をフィルタリングして、指定した条件を満たす要素のみを表示できます。 コールバック関数を使用して配列内の各要素を反復処理し、指定された条件を満たす要素のみを返します。

JavaScript の filter() メソッドは、配列内のデータを操作するための追加オプションを提供するパラメーターを受け入れることを除いて、他のメソッドと似ています。

filter() メソッドは、コールバック関数とオプションのオブジェクトという 2 つの名前付き引数を受け入れます。 コールバック関数は 3 つの引数を取ります。

配列引数のインデックスはオプションです。

filter() メソッドは、すべての要素を含む新しい配列を作成します。 filter() メソッドの構文を記述するには 3 つの異なる方法があります。 構文は次のとおりです。

callbackFn は配列の各要素を実行します。 要素を配列に保持するために真の値を返します。 callbackFn は次の引数を使用して呼び出されます。

JavaScript の詳細 JavaScript で配列スライスを使用する 3 つの方法

JavaScript で filter() メソッドを使用するには、次の 4 つの手順に従う必要があります。

以下は、filter() メソッドを使用して、文字「B」で始まる自動車ブランドの検索条件に基づいて配列をフィルター処理する例です。

この例では、配列 car に対して filter() メソッドが呼び出され、文字「B」で始まる自動車ブランドのみが返されます。 関数 filterItems は 2 つのパラメータ arr と query を取りますこれは、一致するクエリ値を持つ新しい配列を返します。 filterItemメソッド内filter() メソッドは、クエリに基づいて配列をフィルタリングする car 配列に対して呼び出されます。

filter() メソッドは配列を走査し、各要素をテストしてクエリと一致するかどうかを判断します。 Bentley、BMW、Bertone の 3 つのブランドを含む新しい配列が返されます。

filter() メソッドは元の配列を変更せず、関数内のテストに合格した要素のみを含む新しい配列を返します。

次のコードは、数値の配列をフィルターし、偶数の要素のみを含む新しい配列を作成します。 数値の配列に対して filter() を使用する手順は次のとおりです。

以下にプログラムを示す例を示します。

上記のコードでは、数値配列numberArrを定義しました。 NumbersArr で filter() メソッドを使用し、モジュロ演算子 % を使用して各要素が偶数であるかどうかを判定する関数を渡し、数値が 2 で割り切れるかどうかを確認しました。 数値が偶数の場合、関数は true を返し、要素は新しい配列 EvenNumbers に含まれます。 数値が奇数の場合、関数は false を返し、その数値は新しい配列から除外されます。

以下は、オブジェクトの配列をフィルターし、真実の要素のみを含む新しい配列を作成するコードです。 オブジェクトの配列に対して filter() を使用する手順は次のとおりです。

以下は、プログラムを示すコード スニペットの例です。

上記のコードでは、フリーランサー オブジェクトの配列を定義しました。 フリーランサーの配列に対して filter() メソッドを使用し、各フリーランサーが JavaScript に熟練しているかどうかをチェックする関数を渡しました。 スキルが条件に一致した場合、オブジェクトは新しい配列 filter_freelancers に追加されました。 スキルが一致しない場合、関数は false を返し、オブジェクトは新しい配列から除外されます。 結果は、JavaScript に熟練した 2 人のフリーランサー、Harry と David を含む新しい配列を返します。

次のコードは、配列からすべての素数をフィルターし、素数のみを含む新しい配列を作成します。 filter() を使用する手順は次のとおりです。

この例を示すコード スニペットの例を次に示します。