JavaScriptフィルター：ステップバイステップガイド

JavaScript（）フィルターメソッドは、既存の配列から要素の配列を作成します。 filter（）メソッドは、コールバック関数を引数として受け入れます。この関数は、要素を既存のリストから新しいリストに追加する必要があるかどうかを評価します。

JavaScriptを初めて使用する場合は、 filter（）について聞いたことがないかもしれません。 およびreduce（） Javascript関数。これらの関数は、配列とも呼ばれるオブジェクトのリストを操作するときに役立ちます。 。

配列から特定の値のみを取得したい場合は、JavaScript filter（）を使用できます。 関数。このチュートリアルでは、例を参照して、filter（）関数の使用方法について説明します。

アレイリフレッシャー

JavaScript配列は、0個以上のアイテムを格納します。項目は、数値、他の配列、文字列、または別のデータ型を使用できます。特定のアイテムにアクセスするために、「0」から始まる番号付きのインデックスを使用します。

配列を使用すると、同じ変数に複数の値を格納できます。これにより、値を格納するために複数の変数を記述する必要がなくなるため、より適切でクリーンな記述が可能になります。

JavaScriptの配列の例を次に示します。

let names = ["Alex", "Bill", "Connor", "Daniel", "Edna"];

JavaScriptフィルター配列

JavaScript配列filter（）メソッドは、既存の配列の内容に基づいて新しい配列を作成します。 filter（）メソッドは、既存の配列の各アイテムのコールバック関数を評価します。コールバック関数の条件を満たすアイテムはすべて、新しいリストに追加されます。

フィルタメソッドを使用すると、特定の条件を満たす値を取得して、新しい配列に追加できます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

フィルター配列JavaScript構文

filterメソッドは、次の構文を使用します。

var newArr = oldArr.filter(function(item) {
	return yourCondition;
});

このコードは、「oldArr」配列の内容に基づいて「newArr」と呼ばれる配列を定義します。条件が満たされた場合、コールバック関数は新しい配列に値を返します。条件の例は次のとおりです。

• アイテム>5
• item ==“ Jessie”
• アイテム<3

JavaScript比較演算子を使用して、条件を作成できます。または、ifステートメントを使用できます。 ifステートメントを使用すると、複数の値のどれを新しいリストに追加するかを制御できます。

JavaScriptの例をフィルターする

数値のリストをフィルタリングする

簡単な例から始めましょう。コーヒーショップからの購入リストがあります。 10ドル以上の購入を表示する新しいリストを作成したいと思います。

購入リストは次のようになります：

var purchases = [2.50, 2.70, 10.50, 12.30, 9.60, 2.30, 3.40];

filter（）メソッドを使用して、10ドルを超える価値のある購入を取得できます。

var big_purchases = purchases.filter(function(purchase) {
	return purchase > 10;
});

私たちのプログラムは、購入が10ドル以上の価値があるかどうかをチェックします。購入は big_purchasesに追加されます。 10ドル以上の価値があるかどうかをリストします。それ以外の場合、購入は省略されます。

big_purchasesJavaScript変数の値は次のとおりです。

[10.5, 12.3]

filter（）メソッドは、定義したテストに合格したすべての要素を返します。このテストは「アイテム>10」です。すべての購入にアクセスしたい場合は、元の「購入」リストを参照することができます。 filter（）メソッドは、$10より大きい値の配列を返します。

オブジェクトの配列をフィルタリングする

学校の全員の名前を含む配列があります：

var students = [
	{
		id: 1,
		name: "Alex",
		class: "First Grade",
		age: 5
	},
{
		id: 2,
		name: "Bill",
		class: "First Grade",
		age: 5
	},
{
		id: 3,
		name: "Connor",
		class: "Second Grade",
		age: 6
	}
];

1年生の生徒だけを取得したい場合はどうなりますか？ Filter（） この操作を簡単に実行できます。 「students」配列からすべての1年生を返す関数を書いてみましょう：

var firstGradeStudents = students.filter(function (student) {
	return student.class === “First Grade”;
});

Filter（） 1つのパラメータを取ります。これは、データに対して実行する操作を決定する関数です。

filter（） 関数は、「students」配列内のすべてのオブジェクトを通過します。 filter（）は、クラスが「1年生」に等しい生徒を返します。 「===」演算子は平等を意味します。

フィルタ関数は、これらの新しい値を使用して新しい配列を作成し、「firstGradeStudents」変数からアクセスできます。

結論

filter（）配列メソッドを使用して、既存の配列の内容から新しい配列を作成できます。手がかりは、filter（）メソッドの名前にあります。 filter（）フィルター 既存の配列から要素を取り出します。

以上です！これで、 reduce（）を使用できます JavaScriptでさらに自信を持って。 JavaScriptでコーディングする方法の詳細については、JavaScript初心者向けの最高のチュートリアルに関する記事をご覧ください。