This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Recently in the process of reviewing knowledge points always meet reduce method figure, reduce method seems not commonly used, but I think in some scenarios reduce method is very applicable, so this article will introduce the basic application of reduce method and its application scenarios, let’s enjoy its charm!

grammar

The reduce() method executes a Reducer function (ascending) that you provide for each element in the array, summarizing its results into a single return value.

parameter

The Reducer function accepts four parameters:

1. Accumulator (ACC)
2. Current Value (cur)
3. Current Index (idx)
4. Source Array (SRC)

The return value

The result of cumulative processing of the function

A code summaryArray.prototype.reduce()Correct posture

const array1 = [1.2.3.4];
const reducer = (accumulator, currentValue) = > accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
Copy the code

How does Reduce work

Look at the following code:

[0.1.2.3.4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
Copy the code

callback	accumulator	currentValue	currentIndex	array	return value
first call	0	1	1	[0, 1, 2, 3, 4]	1
second call	1	2	2	[0, 1, 2, 3, 4]	3
third call	3	3	3	[0, 1, 2, 3, 4]	6
fourth call	6	4	4	[0, 1, 2, 3, 4]	10

Usage scenarios of Reduce

Scenario 1: Sum all the values in the array

var total = [ 0.1.2.3 ].reduce(
  ( acc, cur ) = > acc + cur,
  0
);
Copy the code

Scenario 2: Accumulate the values in an array of objects

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) = > accumulator + currentValue.x
    ,initialValue
);
console.log(sum) // logs 6
Copy the code

Scenario 3: Array flattening

var flattened = [[0.1], [2.3], [4.5]].reduce(
 ( acc, cur ) = > acc.concat(cur),
 []
);
Copy the code

Scenario 4: Count the number of occurrences of each element in the array

var names = ['Alice'.'Bob'.'Tiff'.'Bruce'.'Alice'];
var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
Copy the code

Scenario 5: Array deduplicate

let myArray = ['a'.'b'.'a'.'b'.'c'.'e'.'e'.'c'.'d'.'d'.'d'.'d']
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue)
  }
  return accumulator
}, [])

console.log(myOrderedArray)
Copy the code

The last

⚽ This article describes the basic use of Reduce and its application scenarios ~ ⚾ If this article is helpful to you, please click the “like” button ~ 🏀GitHub blog github.com/Awu1227. 🏉 I have other columns, welcome to read ~ 🏐 Playing with the Beauty of CSS 🎱Vue from giving up to getting Started 🎳 Simple JavaScript