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
This article example shares the specific code of ...
mysql storage engine: The MySQL server adopts a m...
This article example shares the specific code for...
This article shares the specific code of js to re...
1. Set up HOST on the host Macbook The previous d...
The method found on the Internet works The footer ...
This article introduces the characteristics of CS...
Preface The best method may not be the one you ca...
Despite props and events, sometimes you still nee...
The complete syntax of the SELECT statement is: (...
Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...
mysql 5.7.21 winx64 installation and configuratio...
Table of contents What is native JavaScript A. Ch...
1. Service method Check the firewall status: [roo...