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

コアポイント

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

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

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

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

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

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

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

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]

が含まれています

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

メソッドは、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つのパラメーターがあります。ランサムと現在配列から処理されている単語です。この関数は、現在の値の現在の値を現在の単語の長さに追加します。 total animals totalの2番目のパラメーターをゼロに設定することに注意してください。 2番目のパラメーターがなければ、

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

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

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

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

reduce()結論addLengthaddLength()

および

と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のマップをデバッグまたは削減する方法は？

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

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