ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptを使用して配列のマップとフィルターの両方を使用するにはどうすればよいですか?

JavaScriptを使用して配列のマップとフィルターの両方を使用するにはどうすればよいですか?

PHPz
リリース: 2023-08-28 20:29:05
転載
900 人が閲覧しました

如何使用 JavaScript 在数组上同时使用映射和过滤器?

filter() メソッドは配列内の値をフィルタリングするために使用され、map() メソッドは各値に基づいて新しい値を別の配列にマップするために使用されます。古いアレイの。

filter() メソッドと map() メソッドを同時に使用する必要がある場合があります。たとえば、配列からすべての正の数値をフィルターで除外し、その対数値を新しい配列にマッピングしたいとします。

このチュートリアルを始める前に、filter() メソッドと map() メソッドの概要を見てみましょう。このチュートリアルでは、JavaScript を使用して配列に対してマッピングとフィルタリングの両方のメソッドを使用する方法を学びます。

array.filter() メソッドの構文

ユーザーは、次の構文に従って JavaScript filter() メソッドを使用できます。

リーリー

上記の構文では、コールバック関数を filter() メソッドのパラメータとして渡します。

array.map()メソッドの構文

ユーザーは、次の構文に従って JavaScript map() メソッドを使用できます。

リーリー

上記の構文では、map() メソッドのコールバック関数から配列要素を返す必要があります。

パラメータ

  • element – filter() メソッドを使用して配列を反復処理する場合、それが配列の現在の要素になります。

  • index – 配列内の要素のインデックスです。

  • self – それ自体が配列です。

array.map() メソッドと array.filter() メソッドを同時に使用する

このセクションでは、単一の配列で filter() メソッドと map() メソッドを一緒に使用する方法を説明します。

###文法###

ユーザーは、次の構文に従って、map() メソッドと filter() メソッドを一緒に使用できます。

リーリー

上記の構文では、まず配列に対して filter() メソッドを使用し、次に map() メソッドを使用します。

例 1

以下の例では、配列に正の数値と負の数値が含まれています。配列を参照として取得し、配列に対して filter() メソッドを呼び出して、配列内のすべての正の値をフィルターします。 filter() メソッドのコールバック関数では、数値がゼロより大きい場合は true を返し、それ以外の場合はエラーを返します。

その後、map() メソッドを使用して、フィルターされた各要素の対数を返します。フィルター処理された配列内の負の値がすべて削除されているため、ユーザーは logarithmic_values 配列に 6 つの値のみが含まれていることがわかります。

リーリー

例 2

次の例では、オブジェクトの配列を作成します。配列内の各オブジェクトには、従業員 ID、勤続年数、給与が含まれます。

その後、filter() メソッドを使用して、3 年以上の経験を持つすべての従業員をフィルタリングします。次に、map() メソッドを使用して、全従業員の給与を 50% 増やし、新しい給与を new_salaries 配列に格納します。

出力では、ユーザーは最初に増分後の給与総額を確認できます。

リーリー

ユーザーは、さまざまな例を通じて、filter() メソッドと map() メソッドを組み合わせて使用​​する方法を学びました。最初の例では、数値の配列を指定して filter() メソッドと map() メソッドを使用します。 2 番目の例では、オブジェクトの配列に対して filter() メソッドと map() メソッドを使用する方法も学びました。

以上がJavaScriptを使用して配列のマップとフィルターの両方を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート