JavaScriptシリーズ--JavaScript配列の高次関数reduce()方法の詳細解と奇淫技巧

8468 ワード

はじめに
reduce()メソッドは、アキュムレータとして関数を受信し、配列内の各値(左から右へ)は縮小され、最終的には1つの値として計算される.
reduce()は関数のcomposeとして高次関数として利用できる.
reduce()方法で解決できるもの、for循環、またはforEach方法でも時々解決できます.なぜreduce()を使いますか?この問題は、前にも考えましたが、原因としては本当に見つけられません.唯一見つけられるのは、成功への道がたくさんあります.

二、文法

arr.reduce(callback,initialValue)

最後の値を返します.reduceは、配列内の各要素に対して、順番にコールバック関数を実行します.配列中の削除または未割り当ての要素を含まず、4つのパラメータを受け入れます.初期値(または前回のコールバック関数の戻り値)、現在の要素値、現在のインデックス、reduceの配列を呼び出します.

三、実例解析intialValueパラメータ
1、最初の例:

var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; }) console.log(arr, sum);

印刷結果:1 2 13 3 26[1,2,3,4]10

2、第二の例

var  arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; }，0) //           console.log(arr, sum);

印刷結果:0 1 01 2 13 3 26[1,2,3,4]10
この例のindexは0から始まります.最初のprevの値は私達が設定した初期値0で、配列長は4、reduce関数は4回循環します.
結論: initialValue，reduce 1 callback ，。 initialValue， 0 。
この配列が空いていると、reduceを使うとどうなりますか?

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; }) //  ，"TypeError: Reduce of empty array with no initial value"

しかし、初期値を設定したら間違いなく次のようになります.

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; }，0) console.log(arr, sum); // [] 0

したがって、一般的には、初期値を提供することがより安全である.

四、簡単な使い方
もちろん一番簡単なのは私たちがよく使う配列の合計です.積を求めます.

var  arr = [1, 2, 3, 4]; var sum = arr.reduce((x,y)=>x+y) var mul = arr.reduce((x,y)=>x*y) console.log( sum ); //  ，10 console.log( mul ); //   ，24

五、レデュースの高級用法
(1)配列内の各要素の出現回数を計算します.

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; let nameNum = names.reduce((pre,cur)=>{ if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre },{}) console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

(2)配列のデキストリン

let arr = [1,2,3,4,4,1] let newArr = arr.reduce((pre,cur)=>{ if(!pre.includes(cur)){ return pre.concat(cur) }else{ return pre } },[]) console.log(newArr);// [1, 2, 3, 4]

(3)二次元配列を一次元に変換する

let arr = [[0, 1], [2, 3], [4, 5]] let newArr = arr.reduce((pre,cur)=>{ return pre.concat(cur) },[]) console.log(newArr); // [0, 1, 2, 3, 4, 5]

(4)多次元配列を一次元に変換する

let arr = [[0, 1], [2, 3], [4,[5,6,7]]] const newArr = function(arr){ return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[]) } console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

(5)オブジェクト内の属性の合計

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20 }, { subject: 'english', score: 30 } ]; var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, 0); console.log(sum) //60

(6)［1,3,1,4］を数字1314に変換する.

function addDigitValue(prev,curr,curIndex,array){
        var exponent = (array.length -1) -curIndex; var digitValue = curr*Math.pow(10,exponent); return prev + digitValue; } var arr6 = [1,3,1,4]; var result7 = arr6.reduce(addDigitValue,0) console.info('result7',result7)

Nodeのイベントサイクル