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 // 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 [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(...[1, 2, 3, 4, 5, 6, 7, 8]); 3. Dealing with irregular arrays By using 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 duplicationChecks 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 legalThis 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 attributesGroup 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 FlatteningThe 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 StringThis 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:
|
<<: Detailed tutorial on installing MySQL database on Alibaba Cloud Server
>>: How to deploy zabbix_agent in docker
1. Download the installation package Download add...
/******************** * Character device driver**...
The code looks like this: SELECT @i:=@i+1 rowNum,...
This article example shares the specific code of ...
<br />This is an article I collected a long ...
Method 1: Use CSS overflow omission to solve The ...
Disable Build Partition expressions do not suppor...
1. VMware download and install Link: https://www....
The following are its properties: direction Set th...
Today's article mainly introduces the reload ...
1. Basic knowledge: Http Header User-Agent User A...
<br />Original article: http://www.alistapar...
This article example shares the specific code of ...
1. Varnish Overview 1. Introduction to Varnish Va...
In cells, light border colors can be defined indi...