前言
最近在复习知识点的过程总是会遇见reduce方法的身影，reduce方法好像并不常用，但是我觉得在某些场景下reduce方法还是非常适用的，那么这篇文章就来介绍reduce方法的基本适用以及它的适用场景，让我们一起来领略它的魅力吧！
语法
reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
参数
reducer 函数接收4个参数:
- Accumulator (acc) (累计器)
- Current Value (cur) (当前值)
- Current Index (idx) (当前索引)
- Source Array (src) (源数组)
返回值
函数累计处理的结果
一段代码总结
Array.prototype.reduce() 正确使用姿势
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 复制代码
reduce如何运行的呢
看下面代码：
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){ return accumulator + currentValue; }); 复制代码
| 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 |
reduce的使用场景
场景一：求数组里的所有值的和
var total = [ 0, 1, 2, 3 ].reduce( ( acc, cur ) => acc + cur, 0 ); 复制代码
场景二：累加对象数组里的值
var initialValue = 0; var sum = [{x: 1}, {x:2}, {x:3}].reduce( (accumulator, currentValue) => accumulator + currentValue.x ,initialValue ); console.log(sum) // logs 6 复制代码
场景三：数组扁平化
var flattened = [[0, 1], [2, 3], [4, 5]].reduce( ( acc, cur ) => acc.concat(cur), [] ); 复制代码
场景四：计算数组中每个元素出现的次数
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 } 复制代码
场景五：数组去重
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) 复制代码
最后
⚽本文介绍了reduce的基本使用以及使用场景~
⚾如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
