8 JS reduce usage examples and reduce operation methods

8 JS reduce usage examples and reduce operation methods

reduce method is an array iteration method. Unlike map and filter , reduce method can cache a variable. During iteration, we can operate on this variable and then return it.

This is my explanation in plain language. It may still be difficult to understand. Let’s look at the examples below.

1. Array Accumulation

Array accumulation is often encountered in projects, such as calculating the total price of goods. Using reduce , it can be done in one line of code without defining external variables. Reduce is a function with no side effects.

// Accumulate [1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i);
// Output: 36

// Accumulate, with a default initial value of [1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i, 5);
// Output: 41

// Accumulate [1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a * i);
// Output: 40320

2. Find the maximum value of an array

In each iteration of the array, we use Math.max to get the maximum value and return it. In the end, we will get the maximum value of all items in the array.

[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));

Of course, if each item in the array is a number, we can use the ... spread operator in conjunction with Math.max .

Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);

3. Dealing with irregular arrays

By using map and reduce together, the concatenated result of each sub-array is returned.

let data = [
  ["red","128g","iPhone"],
  ["North-South","Two bedrooms and one living room","128㎡","Western-style house"],
  ["Xiaomi","white","smart sports watch","heart rate, blood pressure, blood oxygen","call message reminder"], 
  ["Official Release","Autumn 2020","Basketball","Sneakers","Brand Direct Mail"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))

// Output:
["Red 128g Apple mobile phone"
"North-South two-bedroom and one-living room 128㎡ Western-style house"
"Xiaomi white smart sports watch heart rate, blood pressure, blood oxygen, call information reminder"
"Official sale of 2020 autumn basketball shoes brand direct mail"]

4. Remove data duplication

Checks if the current iteration item exists, and adds it to the array if it does not exist.

let array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'];
array.reduce((noDupes, curVal) => {
  if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
  return noDupes
}, [])

// Output: [1, 2, 3, 'a', 'b', 'c']

5. Verify that the brackets are legal

This is a very clever usage, which I saw on dev.to. If the result is equal to 0, it means that the number of brackets is legal.

[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// Output: 0

// Using loop method let status=0
for (let i of [..."(())()(()())"]) {
  if(i === "(")
    status = status + 1
  else if(i === ")")
    status = status - 1
  if (status < 0) {
    break;
  }
}

6. Group by attributes

Group the data by the specified key. Here I use the country field to group. During each iteration, check whether the current country exists. If not, create an array and insert the data into the array. And returns the array.

let obj = [
  {name: '张三', job: 'Data Analyst', country: '中国'},
  {name: 'Ace', job: 'Scientist', country: 'China'},
  {name: 'Leir', job: 'Scientist', country: 'United States'},
  {name: 'Bob', job: 'Software Engineer', country: 'India'},
]

obj.reduce((group, curP) => {
  let newkey = curP['country']
  if(!group[newkey]){
    group[newkey]=[]
  }
  group[newkey].push(curP)
  return group
}, [])
// Output:
[ China: [{…}, {…}]
  India: [{…}]
  USA: [{…}] ]

7. Array Flattening

The array shown here is only one level deep. If the array is multi-level, you can use recursion to process it.

[[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) => singleArr.concat(nextArray), [])
// Output: [3, 4, 5, 2, 5, 3, 4, 5, 6]

Of course, you can also use ES6's .flat method instead

[ [3, 4, 5], 
 [2, 5, 3], 
 [4, 5, 6]
].flat();

8. Reverse a String

This is also a very wonderful way to achieve

[..."hello world"].reduce((a,v) => v+a)

or

[..."hello world"].reverse().join('')

You may also be interested in:
  • 5 Basic Usage Examples of reduce() in JavaScript
  • JavaScript Array reduce() Method
  • Summary of using the reduce() method in JS
  • js uses the reduce method to make your code more elegant
  • Detailed explanation of JavaScript Reduce
  • Detailed explanation of the basic usage of JavaScript reduce

<<:  Detailed tutorial on installing MySQL database on Alibaba Cloud Server

>>:  How to deploy zabbix_agent in docker

Recommend

Vue custom optional time calendar component

This article example shares the specific code of ...

How to modify the default storage engine in MySQL

mysql storage engine: The MySQL server adopts a m...

JS implements city list effect based on VUE component

This article example shares the specific code for...

How to use VirtualBox to simulate a Linux cluster

1. Set up HOST on the host Macbook The previous d...

A brief discussion on the characteristics of CSS float

This article introduces the characteristics of CS...

Detailed explanation of Linux one-line command to process batch files

Preface The best method may not be the one you ca...

Vue.js $refs usage case explanation

Despite props and events, sometimes you still nee...

A brief understanding of MySQL SELECT execution order

The complete syntax of the SELECT statement is: (...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

...

How to check if the firewall is turned off in Linux

1. Service method Check the firewall status: [roo...