MAPを使用して、機能的なJavaScriptで削減します

コアポイント

• javascriptネイティブArrayおよびmap()メソッドreduce()オブジェクトは、コードをより簡潔で読みやすく、メンテナンスにしやすくする強力な機能プログラミングツールです。
• map()は、配列内のすべての要素に作用し、変換されたコンテンツを含む同じ長さの別の配列を生成する基本的な機能プログラミング手法です。アレイオブジェクトにマッピング機能を追加することにより、ECMAScript 5は基本的な配列タイプを完全なファンチャーに変え、機能的なプログラミングを使いやすくします。
• reduce()メソッド（ECMAScript 5の新しいメソッド）はmap()に似ていますが、別のファンクタを生成する代わりに、任意のタイプの単一の結果を生成します。アレイが単一の出力値に縮小されるように、配列の各要素に関数を適用します。
• map()およびreduce()メソッドはパフォーマンスに影響を与える可能性がありますが、コードの品質とそれらの使用に関する開発者の満足度の改善は、パフォーマンスへの一時的な影響を上回る可能性があります。著者は、開発のために機能的手法を使用し、現実世界の状況での影響を測定する前に、特定のアプリケーションに適しているかどうかを決定することを推奨しています。 map() reduce() オブジェクトに基づいたネイティブ

および

メソッドが含まれます。 Array map()reduce()と

をまだ使用していない場合は、今すぐ始めてください！ほとんどの最新のJavaScriptプラットフォームは、ECMAScript 5をネイティブにサポートしています。マッピングと規制により、コードをより簡潔にし、読みやすく、維持しやすくなり、よりエレガントな機能開発に導くことができます。

map()reduce()パフォーマンス：予防策もちろん、必要に応じて、コードの読み取りとメンテナンスはパフォーマンスとバランスをとる必要があります。現在、ブラウザは、

ループなどのより面倒な従来のテクニックを使用してより効率的です。 私のアプローチは、通常、最初に読みやすく維持しやすいコードを作成し、実際の状況で問題に気付いた場合にパフォーマンスを最適化することです。早期最適化はすべての悪の源です。

また、ブラウザが最適化されているため、

およびforを最適化すると、これらの方法を使用すると、JavaScriptエンジンの改善をより有効にする可能性があることも考慮してください。私がパフォーマンスの問題に直面していない限り、私は楽観的にコードを書き、必要な場合に備えて私のバックアップポケットで私のコードを魅力的にするパフォーマンスの微調整を行うことを好みます。

Map

map()を使用します

マッピングは、配列内のすべての要素に作用し、同じ長さの別の配列（変換されたコンテンツを含む）を生成する基本的な機能プログラミング手法です。

より具体的には、単純なユースケースを考えてみましょう。たとえば、各単語の長さを含む配列に変換する必要がある単語の配列があるとします。 （これは、複雑なアプリケーションで通常実行する必要がある複雑なロケット科学のようなものではありませんが、この単純なケースでそれがどのように機能するかを理解することで、ケースに備えてコードを適用するのに役立ちます）。

アレイで

ループを使用して、今後説明したことを行う方法を既に知っているかもしれません。このように見えるかもしれません：for

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

私たちが行ったのは、いくつかの変数を定義しました。各アイテムを保存します。配列の各ループで動作します。一時的な内部カウンター変数と

変数を使用して、animalsループを最適化します。次に、各アイテムをlengths配列の長さまで反復します。各アイテムについて、その長さを計算し、それをitem配列に押し込みます。 for loopsfor注：中間割り当てなしでanimalsの長さをlengths配列に直接プッシュすることで、これをより簡潔に行うことができると言えます。これにより、コードが節約されますが、この非常に単純な例であっても、コードの読み取りが低下します。繰り返しますが、より効率的ではあるが簡単ではないようにするために、既知の

配列の長さを使用して

配列をに初期化し、animals[count]を使用する代わりにインデックスでアイテムを挿入できます。それはすべて、現実の世界でコードをどのように使用するかに依存します。 lengthsanimals lengthsこの方法には技術的な問題はありません。標準のJavaScriptエンジンで動作するはずで、仕事をします。しかし、new Array(animals.length)の使用方法を知ったら、そうすることは不器用に見えるでしょう。 push これに対処するために

を使用する方法をお見せしましょう：

map()

この場合、

配列変数から再び開始します。ただし、宣言する他の変数のみはmap()です。これは、

配列の各要素に匿名のインライン関数をマッピングした結果に直接割り当てます。この匿名関数は、各動物で操作を実行し、長さを返します。その結果、

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

は、各単語の長さを含むオリジナル

配列と同じ長さのアレイになります。 animals

この方法について注意するいくつかのポイント。まず、元の方法よりもはるかに短いです。第二に、はるかに少ない変数を宣言する必要があります。変数が少ないほど、グローバルネームスペースにはノイズが少なくなり、同じコードの他の部分が同じ名前の変数を使用すると、競合の可能性が低くなります。さらに、変数はその価値を最初から最後まで変更する必要はありません。機能的なプログラミングに飛び込むと、定数と不変の変数を使用する優雅な能力を高く評価します。今すぐ学習を開始するのに遅すぎることはありません。

このアプローチのもう1つの利点は、指定された関数を分離してそのプロセスでクリーナーコードを生成することにより、その汎用性を改善する機会があることです。匿名のインライン関数は、乱雑に見え、コードの再利用をより困難にすることができます。この方法でコンテキストでそれを使用することができます。

getLength()これがどれほどきれいに見えるかを見てください。 Toolkitの一部としてマッピングを取得するだけで、コードをまったく新しい機能レベルに引き上げることができます。

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

ファンクターとは何ですか？

興味深いことに、マッピング機能を配列オブジェクトに追加することにより、ECMAScript 5を基本的な配列タイプを完全なファンチャーに変え、機能的なプログラミングを使用しやすくします。

古典的な機能プログラミングの定義によると、ファンサーは3つの条件を満たしています。

値のセット

が含まれています

各要素に作用するマッピング関数を実装します

1. そのマッピング関数は、同じサイズのファンサーを返します
これは、次のJavaScriptミーティングで議論できるトピックです。
機能者の詳細については、Mattias Petter Johanssonのこの素晴らしいビデオをご覧ください。

rediming

を使用します

メソッドは、ecMascript 5の新しい方法でもあります。これは、に類似していますが、別のファンチャーを生成せず、単一の結果を生成します。たとえば、

配列内のすべての単語の長さの合計を数字として取得するとします。から始めることができます：

reduce() map()最初の配列を定義した後、実行合計の変数animalsを作成し、最初はゼロに設定します。また、

ループを通過するときに

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

配列の各反復を保存する変数

、およびループカウンターの変数total、およびa item変数を最適化するanimals変数も作成しました。次に、Aforループを実行して、count配列内のすべての単語を反復し、各単語をloops変数に割り当てます。最後に、各アイテムの長さを合計に追加します。 for animals繰り返しますが、このアプローチには技術的な問題はありません。配列から始めて、最終的に結果を得ます。ただし、itemメソッドを使用すると、このプロセスをより直接的にすることができます。

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

ここで起こるのは、新しい変数を定義し、匿名インライン関数と初期実行合計値ゼロの2つのパラメーターを使用して

配列を削減した結果に割り当てていることです。削減は、配列内の各アイテムを通過し、そのアイテムの関数を実行し、次の反復に合計された実行に追加します。ここで、インライン関数には2つのパラメーターがあります。ランサムと現在配列から処理されている単語です。この関数は、現在の値の現在の値を現在の単語の長さに追加します。 total animals totalの2番目のパラメーターをゼロに設定することに注意してください。 2番目のパラメーターがなければ、

メソッドは引き続き機能しますが、結果は必ずしも予想される結果ではありません。 （それを試して、合計を実行するときにJavaScriptによって使用されるロジックを確認してください。）

reduce()匿名のインライン関数の定義はtotalメソッドを呼び出すときに統合されるため、これは必要以上に複雑に見えるかもしれません。もう一度やりましょうが、匿名のインライン関数を使用する代わりに、まず名前付き関数を定義しましょう。 reduce

これはもう少し長いですが、成長するのは必ずしも悪いことではありません。この方法で表示すると、

メソッドで何が起こるかが少し明確になります。 reduce()

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

メソッドには、アレイ内の各要素に適用される関数と、合計の実行に使用される初期値の2つのパラメーターがあります。この場合、

という名前の新しい関数の名前と実行合計ゼロの初期値を渡します。 reduce関数を作成して、2つのパラメーターも受け入れます：実行されるrun sumと文字列。

reduce()結論addLengthaddLength()

定期的に使用する習慣を開発することで、コードをより簡潔で、より一般的で、維持しやすくし、より機能的なJavaScriptテクノロジーを使用する方法を開くための代替手段が提供されます。

および

メソッドは、ECMAScript 5に追加された新しいメソッドの2つにすぎません。おそらく、今日見られるコードの品質と開発者の満足度の改善は、パフォーマンスへの一時的な影響をはるかに上回るでしょう。機能的な手法を使用して、

とmap()がアプリケーションに適しているかどうかを決定する前に、現実世界の影響を開発および測定します。 reduce()

この記事は、Panayiotis Velisarakos、Tim Severien、Dan Princeによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します！ map()reduce() map()reduce()functional javascript（faq）

におけるMap-Reduceに関するよくある質問

JavaScriptのMAPとReduceの違いは何ですか？

javascriptでは、マップと還元は両方ともアレイに作用する高次関数です。マップ関数は、元の配列の各要素に関数を適用することにより、新しい配列を作成するために使用されます。元の配列は変更されませんが、新しい配列を返します。一方、還元関数は、配列を単一の値に単純化するために使用されます。アレイの各要素に関数を適用して、単一の出力値に縮小できるようにします。

マップ機能はJavaScriptでどのように機能しますか？

JavaScriptのマップ関数は、既存の配列から新しい配列を作成することで機能します。これは、指定された関数を元の配列内の各要素に適用することにより行います。この関数は、配列内の各要素に対して1回呼び出されます。結果は、関数呼び出しの結果を含む新しい配列です。

JavaScriptで機能を削減するにはどうすれば機能しますか？

JavaScriptの削減機能は、配列の各要素に関数を適用して、配列を単一の出力値に削減できるように機能します。出力値は、関数呼び出しの累積結果です。この関数は、アキュムレータと現在の値の2つのパラメーターを受け入れます。アキュムレータの蓄積関数呼び出しの返品値。

JavaScriptでマップを使用して削減できますか？

はい、JavaScriptでマップを使用して削減できます。実際、それらは機能的なプログラミングでよく使用されます。マップ関数を使用して各要素を配列内のコンバージョンを変換し、redoce関数を使用して、変換された要素を単一の出力値に結合することができます。

JavaScriptのMAPとForeachの違いは何ですか？

マップとforeachはどちらもJavaScriptの配列に作用する高次関数です。それらの主な違いは、MAPが元の配列の各要素に関数を適用して新しい配列を作成し、Arlayの各要素に適用して副作用を取得することです。 foreachは新しい配列を返しません。

マップ関数を使用してJavaScriptの配列を変換するにはどうすればよいですか？

JavaScriptのマップ関数を使用して、配列の各要素に関数を適用して配列を変換できます。この関数は、配列内の各要素に対して1回呼び出されます。結果は、関数呼び出しの結果を含む新しい配列です。

resid機能を使用して、javascriptの配列の要素を組み合わせた方法は？

JavaScriptのReduce関数を使用して、配列の要素を単一の出力値に組み合わせることができます。関数は配列内の各要素に適用され、出力値は関数呼び出しの累積結果です。

JavaScriptのマップ関数の一般的なユースケースは何ですか？

JavaScriptのマップ関数は、アレイの各要素に関数を適用することにより、アレイを変換するために多くの場合使用されます。いくつかの一般的なユースケースには、文字列を数値に変換し、文字列のケースを変更し、オブジェクトからプロパティを抽出することが含まれます。

JavaScriptの機能を低下させる一般的なユースケースは何ですか？

JavaScriptの削減機能は通常、配列の要素を単一の出力値に結合するために使用されます。いくつかの一般的なユースケースには、数値の合計、最大値または最小値の検索、および連結文字列が含まれます。

JavaScriptのマップをデバッグまたは削減する方法は？

関数のconsole.logステートメントを使用して変数と式の値を表示することにより、JavaScriptのマップをデバッグまたはJavaScriptの機能を低減できます。また、debugger

以上がMAPを使用して、機能的なJavaScriptで削減しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。