A thorough understanding of the Array.reduce method in js in one article

Preface

We often use the reduce method of the Array object to do some calculations or data combinations. We find that after using reduce for so many years, it is not I know it well and just recently discovered that it works fine if we don't pass the initial value, and the array can also be an array of functions to enhance our code.

This article will take you back to understand Array.reduce and application scenarios.

Re-understanding Array.reduce

Let’s take a look at how MDN describes it:

reduce()The method executes areducerfunction provided by you in order for each element in the array. Each time thereduceris run, the calculation result of the previous element will be passed in as a parameter, and finally The results are summarized into a single return value.

Let’s take a look at this code:

const arr = [1, 2, 3] const initValue = 10; function reducer(previousValue, currentValue, currentIndex, arrryTarget) { return preValue + currentValue } arr.reduce(reducer, initValue) // res === 16

reduce will traverse the arr array. The reducer will be executed as many times as there are arrays. The parameters for each execution process (arrryTarget is the same, so it is meaningless, unless the original array is directly changed during the traversal process, so it is not considered here) are as follows:

initialValue

, and the iterator will start executing from the second element (index 1 instead of 0)

That is When the reducer function is executed for the first time, there is no "last calculation result". The initial value is passed here, so the

function starts execution from the element with array index 0, that is,arr.lengthis equal to thereducernumber of executions.But what if the initial value is not passed? Let's change the code:

const arr = [1, 2, 3] - const initValue = 10; function reducer(previousValue, currentValue, currentIndex, arrryTarget) { return preValue + currentValue } - arr.reduce(reducer, initValue) // res === 16 + arr.reduce(reducer) // res === 6

At this time, the reducer will only execute

times. The parameters for each execution are as follows:

const orders = [{ id: 1, amount: 10 }, { id: 2, amount: 12 }, { id: 3, amount: 5 }] const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0); // 27

[true, true, false, true].reduce((a, b) => a & b); // 有false，按照与逻辑，一定会是false

[[1,2], [3, 4]].reduce((arrA, arrB) => [...arrA, ...arrB])

function flaten(arr) { if(!Array.isArray(arr)) { return arr; } return arr.reduce((result, item) => { // 不是数组，则直接放在数组末尾 if(!Array.isArray(item)) { result.push(item); return result; } return result.concat(flaten(item)) }, []) } flaten([1,2, [3, 4], [6, [7, 8]]]) // [1, 2, 3, 4, 6, 7, 8]

[func1, func2. func3, func4].reduce((value, funcN) => funcN(value), value)，