Javascriptの組み込み関数reduceの応用の詳細説明-jsチュートリアル-php.cn

Javascriptの組み込み関数reduceの応用の詳細説明

高洛峰

リリース： 2016-12-28 09:40:51

オリジナル

1217 人が閲覧しました

前書き

一般に、reduce メソッドを通じて実装できるロジックは、forEach メソッドを通じて偽装して実装できます。ブラウザの JS エンジンがこれら 2 つのメソッドを C++ レベルでどのように実装するかは明らかではありませんが、それは確かです。このメソッドには、配列のトラバーサルも含まれている必要があります。具体的な実装の詳細に関して、配列項目の操作と格納に対して最適化が行われたかどうかは不明です。

配列のreduceメソッドの応用

reduceメソッドには2つのパラメータがあります。最初のパラメータは配列項目を操作するために使用されるコールバックで、2番目のパラメータは操作に渡される初期値です。個々の配列項目について。なお、reduceメソッドの戻り値は配列ではなく、初期値の形で重ね合わせ処理後の演算となります。

reduce メソッドの最も一般的なシナリオは重ね合わせです。

var items = [10, 120, 1000];
 
// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
 
// do the job
var total = items.reduce(reducer, 0);
 
console.log(total); // 1130

ログイン後にコピー

reduce関数は初期値0を基準に重ね合わせを続けていき、最も単純な和の実装が完了していることがわかります。

前の記事で述べたように、reduce 関数の戻り結果の型は、渡された初期値と同じです。前の例では、初期値は数値型でした。同様に、初期値も型にすることができます。物体。

var items = [10, 120, 1000];
 
// our reducer function
var reducer = function add(sumSoFar, item) {
 sumSoFar.sum = sumSoFar.sum + item;
 return sumSoFar;
};
 
// do the job
var total = items.reduce(reducer, {sum: 0});
 
console.log(total); // {sum:1130}

ログイン後にコピー

多重オーバーレイ

reduceメソッドを使用すると、多次元データオーバーレイが完成します。上の例に示されているように、初期値 {sum: 0} は、{sum: 0、totalInEuros: 0、totalInYen: 0} などの複数の属性の重ね合わせを伴う場合、対応するロジックのみです。対処が必要です。

以下のメソッドでは、分割統治法が採用されています。つまり、reduce 関数の最初のパラメーターのコールバックが配列にカプセル化され、配列内の各関数が独立して重ね合わされて、reduce 操作が完了します。すべてはマネージャー関数を通じて管理され、初期パラメーターが渡されます。

var manageReducers = function(reducers) {
 return function(state, item) {
 return Object.keys(reducers).reduce(
  function(nextState, key) {
  reducers[key](state, item);
  return state;
  },
  {}
 );
 }
};

ログイン後にコピー

上記はマネージャー関数の実装です。パラメーターとしてreducersオブジェクトを必要とし、reduceの最初のパラメーターとしてコールバック型関数を返します。この関数内で、多次元の重ね合わせ作業が実行されます (Object.keys())。

この分割統治のアイデアを通じて、ターゲットオブジェクトの複数の属性の同時重ね合わせを完了できます。完全なコードは次のとおりです:

var reducers = { 
 totalInEuros : function(state, item) {
 return state.euros += item.price * 0.897424392;
 },
 totalInYen : function(state, item) {
 return state.yens += item.price * 113.852;
 }
};
 
var manageReducers = function(reducers) {
 return function(state, item) {
 return Object.keys(reducers).reduce(
  function(nextState, key) {
  reducers[key](state, item);
  return state;
  },
  {}
 );
 }
};
 
var bigTotalPriceReducer = manageReducers(reducers);
 
var initialState = {euros:0, yens: 0};
 
var items = [{price: 10}, {price: 120}, {price: 1000}];
 
var totals = items.reduce(bigTotalPriceReducer, initialState);
 
console.log(totals);

ログイン後にコピー

概要

上記は組み込み関数の内容全体です。この記事の内容が皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。

JavaScript の組み込み関数reduce のアプリケーションの詳細な説明については、PHP 中国語 Web サイトに注目してください。