JavaScript の配列 Reduce() 関数の使用法とヒント

reduce は、配列内の削除された要素や値が割り当てられていない要素を除き、配列内の各要素に対してコールバック関数を順番に実行します。次に、JS配列のReduce()メソッドの詳細な説明と高度なテクニックをこの記事を通して皆さんに共有します

基本的な概念

reduce()メソッドは関数を受け取ります。アキュムレータ (アキュムレータ) として、配列の各要素の値が (左から右に) 1 つの値で終わります。

reduce は、配列内の削除された要素や値が割り当てられていない要素を除き、配列内の各要素に対してコールバック関数を順番に実行します。初期値 (または最後のコールバック関数の戻り値)、現在の要素の値、現在のインデックス、reduce が呼び出される配列。

構文:

arr.reduce(callback,[initialValue])

• callback (配列内の各値を実行する関数、4 つのパラメーターを含む)

• previousValue (最後のコールバック呼び出しによって返された値、または指定された初期値) (initialValue))

• currentValue (配列内の現在処理されている要素)

• index (配列内の現在の要素のインデックス)

• array (reduce が呼び出される配列)

• initialValue (最初のコールバックの最初のパラメータとして。)

簡単なアプリケーション

例1:

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 関数の戻り値の型は、渡された初期値と同じです。同様に、初期値は object 型にすることもできます。

例2:

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);

例を示します:

ある生徒の最終成績。は次のとおりです

rreee

生徒の合計スコアを確認するにはどうすればよいですか?

var result = [
  {
    subject: 'math',
    score: 88
  },
  {
    subject: 'chinese',
    score: 95
  },
  {
    subject: 'english',
    score: 80
  }
];

生徒が規律違反で罰せられ、合計得点から 10 点減点されると仮定すると、初期値を -10 に設定するだけで済みます。

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, 0);

この例をもう少し難しくしてみましょう。各科目が生徒の合計スコアに異なる重み付け (それぞれ 50%、30%、20%) を持っている場合、最終的な重み付け結果をどのように見つければよいでしょうか?

解決策は次のとおりです:

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);

別の例を見てください。文字列内に各文字が出現する回数を知るにはどうすればよいでしょうか?

var dis = {
  math: 0.5,
  chinese: 0.3,
  english: 0.2
}
var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);
var qsum = result.reduce(function(prev, cur) {
  return cur.score * dis[cur.subject] + pre;
}, 0)
console.log(sum, qsum);

第二引数で重ね合わせ結果の型の初期値を設定できるので、この時のreduceは単なる足し算ではなく、例えば以下のように柔軟に利用することができます。特定の規則に従って配列をオブジェクトに変換したり、ある形式の配列を別の形式の配列に変換したりすることができます。

var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
  res[cur] ? res[cur] ++ : res[cur] = 1
  return res;
}, {})

koaのソースコードには、モジュール全体がreduceメソッド操作を返す単純なオブジェクトのみです:

[1, 2].reduce(function(res, cur) { 
  res.push(cur + 1); 
  return res; 
}, [])

reduceの概念を理解することで、このモジュールは主に次のようになります。 obj オブジェクトに存在するキーのオブジェクト オブジェクトを作成して返したいと考えています。

りー

以上がJavaScript の配列 Reduce() 関数の使用法とヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。