Javascript規格化配列reduce方法の6つのパラメータを詳しく説明します.

3025 ワード

ECMAScript 5は、2つの規格配列を追加する方法:reduce()およびreduceRight().これらの2つの方法はすべての項目を繰り返して、最終的な戻り値を構築します.(reduce()を使うか、それともreduceRight()を使うかは、主にどちらから遍歴するかによって異なります.それ以外は完全に同じです.ですから、私たちはreduce()だけを言います.)reduce()方法は、2つのパラメータ(約束された6つの)を受け入れる.一つは、各項目で呼び出された関数と、(オプションの)は、正規化ベースの初期値とする.
まず最初のパラメータを話します.このパラメータ(関数)は、4つのパラメータを受信します.前の値、現在の値、項目の索引、および配列オブジェクトです.
次の例:
//    reduce()                   
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array) {
  console.log(prev);  //      ,     1, 3, 6, 10
  console.log(cur);   //      ,     2, 3, 4, 5
  console.log(index); //      ,     1, 2, 3, 4
  console.log(array); //      ,         [1,2,3,4,5]
  return prev + cur;
})
console.log(sum); // 15
第1回はコールバック関数を実行し、prevは1(配列の第1項)、curは2(配列の第2項)、indexは1(0から開始していないことに注意).第二回、prevは3(1プラス2の結果)、curは3(配列の第三項)、indexは2です.
このプロセスは、配列の各項目を一度ずつ訪問し、最後に結果を返します.(全部で4回実行して、1+2+3+4+5=15).
また、2番目のパラメータ(規格化された初期値)を加えた例を見てください.
var values = [1,2,3,4,5];
var num = 3;
var sum = values.reduce(function(prev, cur, index, array) {
  console.log(prev);  //      ,     3, 4, 6, 9,  13
  console.log(cur);   //      ,     1, 2, 3, 4,  5
  console.log(index); //      ,     0,  1,  2,  3,  4
  console.log(array); //      ,         [1,2,3,4,5]
  return prev + cur;
}, num)

console.log(sum); // 18
第1回は、コールバック関数を実行し、prevは3であり(reduce()方法の第2のパラメータ(規格化ベースの初期値))、curは1であり(配列の第1項)、indexは0である(注0から開始する).第二回、prevは4(3プラス1の結果)、curは2(配列の第二項)、indexは1である.このプロセスは配列の各項目を一度ずつ訪問し、最後に結果を返します.(全部で5回実行します.3+1+2+3+4+5=18を得ます.)
この二つの簡単な例を通して、レデュースという「六個」(実際には二つのはずですが、最初のパラメータは一つの関数です.この関数は四つのパラメータがあります.)のパラメータが分かりますよね.
次は簡単なアルゴリズムの問題をします.
let str = `name,  age,  hair
Merble, 35, red
Bob, 64, blonde`; // str : [ ['name', 'age', 'hair'], ['Merble', '35', 'red'], ['Bob', '64', 'blonde'] ]
よく考えてください.次の答えを盗み見しないでください.
盗み見するな
盗み見するな
答え
function lameCSV(str) {
  return str.split('
').reduce(function(table, row){ table.push(row.split(',').map(function(c) {return c.trim();})); return table }, []); } console.log(lameCSV(str));
ES 6版の答え:
const lameCSV = str => (
  str.split('
').reduce((table, row) => { table.push(row.split(',').map(c => c.trim())); return table }, []) )
ES 6の矢印関数についてまだよく分からないなら、私に注目してください.これは私のJavaScript教程更新計画にあります.
前に書いた教程:最も詳しいJSプロトタイプとプロトタイプチェーンは最終的に詳しくて、「可能性は」がありません.(一)最も詳細なJSプロトタイプとプロトタイプチェーンは最終的に詳しく、「可能性は」がない.(二)最も詳細なJSプロトタイプとプロトタイプチェーンは最終的に詳しく、「可能性は」がない.(三)
概念の権威を確保するために、本論文は「JavaScript高級プログラム設計」の第三版、98ページ、部分概念的な内容を引用している.