preface

In the process of daily projects, it is necessary to remove the array objects. Baidu later found that the big guy uses Reduce to remove the shock of heaven and man, so it is to learn

grammar

arr.reduce(callback, [initialValue])
Copy the code

As defined in MDN, the reduce method performs a callback function for every element in the array, excluding elements that were deleted or never assigned

The return value

The return value is the content of the callback function return

parameter

The functioncallbackFour parameters are accepted:

  • Accumulator: The return value of the callback accumulated by the accumulator, which is the cumulative value returned when the callback was last called, or initialValue(see initialValue for more details)

  • CurrentValue: The element being processed in the array

  • CurrentIndex: The optional index of the element being processed in the array, starting at 0 if initialValue is provided, or 1 otherwise

  • Array: This parameter is an optional array that calls reduce()

Let me talk about it againinitialValueparameter

If an initial value is provided, this parameter is the first parameter of the callback function. If no initial value is provided, the first element of the array is used as the initial value of the callback.

Note: The index value starts at 0 if initialValue is provided, and 1 otherwise.

Give two examples to illustrate the different situations:

1. If initialValue does not exist
    /** If initialValue does not exist **/
    let arr = [0.1.2.3];
    let arrresult = arr.reduce((accumulator,currentValue,currentIndex) = >{
        console.log('accumulator:${accumulator}`.'Current element processed:${currentValue}`.'Current index:${currentIndex}`)
        return accumulator+currentValue
    })
    console.log(arrresult)

Copy the code
The output value is
Accumulator:0Element currently processed:1Current index:1Accumulator:1Element currently processed:2Current index:2Accumulator:3Element currently processed:3Current index:3
6
Copy the code
2. The initialValue exists
      /** If the initialValue parameter exists **/
        let arr = [0.1.2.3];
        let arrresult = arr.reduce((accumulator, currentValue, currentIndex) = > {
            console.log('accumulator:${accumulator}`.'Current element processed:${currentValue}`.'Current index:${currentIndex}`)
            return accumulator + currentValue
        },7)
        console.log(arrresult)
Copy the code
The output value is
Accumulator:7Element currently processed:0Current index:0Accumulator:7Element currently processed:1Current index:1Accumulator:8Element currently processed:2Current index:2Accumulator:10Element currently processed:3Current index:3
13
Copy the code

Conclusion: if the initialValue parameter exists, it can be used as the initialValue of the first parameter of the callback, and the number of traversals starts from index 0. If the initialValue parameter does not exist, the first element of the array is used as the initialValue of the first parameter of the callback. And the index traversed starts at 1

Note: in general, it is safest to set an initialValue for initialValue. An error will be reported when participating in reduce’s array spacetime because the first element of the array cannot be retrieved as the starting value for the callback function, but setting the initialValue of initialValue can avoid this problem

        // the array is empty and the initialValue of initialValue is not set
        let arr = [];
        let arrresult = arr.reduce((accumulator, currentValue, currentIndex) = > {
            console.log('accumulator:${accumulator}`.'Current element processed:${currentValue}`.'Current index:${currentIndex}`)
            return accumulator + currentValue
        })
        console.log(arrresult)
        / / an error
        Reduce. HTML :31 Uncaught TypeError: Reduce of empty array with no initial value
        
        
        // the array is empty, setting the initialValue of initialValue
        let arr1 = [];
        let arrresult1 = arr1.reduce((accumulator, currentValue, currentIndex) = > {
            console.log('accumulator:${accumulator}`.'Current element processed:${currentValue}`.'Current index:${currentIndex}`)
            return accumulator + currentValue
        })
        console.log(arrresult1)
        / / is not an error
        / / print 7
        
Copy the code

Reduce application scenarios

What is the use of reduce? Why do I choose Reduce because there are so many traversal methods? I don’t know yet

1. Fatigue and/or accumulation

let arr = [1.2.3.4];
let arrresult = arr.reduce((accumulator, currentValue, currentIndex) = > {
  return accumulator+currentValue
},0)
console.log(arrresult) / / 10
Copy the code

2. Find the maximum/minimum

 let arr = [200.2.3.4.100];
 let arrresult = arr.reduce((accumulator, currentValue, currentIndex) = > {
    return Math.max(accumulator, currentValue)
 })
 console.log(arrresult) / / 200
 let arrresult1 = arr.reduce((accumulator, currentValue, currentIndex) = > {
          return Math.min(accumulator, currentValue)
 })
 console.log(arrresult1) / / 2
Copy the code

3. The array object is deduplicated

let array = [
	{id:1.name:"Nuggets"},
    {id:2.name:"JKL"},
    {id:3.name:"JKD"},
    {id:5.name:"JKX"},
    {id:1.name:"Nuggets are nuggets."}]// The array object is deduplicated
 function duplicate(arrayobj, key) {
   // Use a third-party object to judge
   let obj = {}
   return arrayobj.reduce((accumulator, currentValue, currentIndex) = > {
          // The value of the current key exists in the obj function
          if(! obj[currentValue[key]]) { obj[currentValue[key]] =true
                 accumulator.push(currentValue)
              }
              return accumulator
          }, [])
   }
   console.log(duplicate(array, 'id'))
Copy the code
The output