js中的reduce数组方法_js educe 方法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54245506/article/details/132993752

js中的reduce方法是一个非常强大的方法，可以对数组进行迭代和累积，虽然一直知道这个方法，但是总是搞不懂他的实际应用场景，而且对里面的参数也不清楚，相信通过下面几个例子，肯定可以理解reduce的使用方法和应用场景，这样在合适的环境就可以做出合适的选择

参数

首先reduce只接收两个参数，第一个参数比较特殊，是一个回调函数，这个函数又接收4个参数，第二个参数表示用于累加的初始值，它可以是一个数字，也可以是个对象或者数组；它不是一个必填参数，如果不提供这个参数，它会取数组的第一个元素作为初始值，并且从第二个元素开始执行回调函数。
然后在详细介绍一下第一个参数传的回调函数，这个函数接收4个参数

accumulation：累加值
currentValue：当前操作的元素值
currentIndex：当前操作元素值的索引
arr：当前操作的数组
上面这4个参数这样命名其实已经可以根据字面意思理解上面四个参数的意思，在这个回调函数中就可以做一些复杂的处理。

理解

以下例子只为理解reduce，并没考虑解决问题复杂化。

第一个例子，筛选出数组对象中符合条件的数据；
比如有有个数组对象，对象中有个status值，分别为0，1，2，0表示未签约，1表示签约中，2表示签约成功，现在需要筛选出签约中和签约成功的数据。数据大概就这样

const arrayData = [
  { name: "david", status: 2 },
  { name: "frank", status: 0 },
  { name: "livia", status: 1 },
  { name: "nick", status: 2 },
  { name: "anne", status: 0 },
  { name: "winco", status: 1 },
  { name: "liz", status: 1 },
  { name: "carl", status: 0 },
  { name: "link", status: 2 },
  { name: "winne", status: 0 },
];

使用数组的filte很简单解决了这个问题

// 筛选出状态为1和2的，0为未签约
const newData = arrayData.filter((item) => item.status !== 0);
console.log(newData);

运行结果：

下面使用reduce来解决这个问题：
因为最后想要得到的累加值是个数组，所以第二个参数累积的初始值就传入一个空数组，然后第二步就是在回调函数中处理将筛选出来的结果放到累加值中就可以了
代码如下：

// 使用reduce来完成这个操作
const reduceData = arrayData.reduce(
  (accumulation, currentValue, currentIndex, arr) => {
    if (currentValue.status !== 0) {
      accumulation.push(currentValue);
    }
    return accumulation;
  },
  []
);

转成reduce同样也可以实现同样的效果，这里面回调函数中的参数只用到了accumulation，currentValue这两个参数解决了这个问题，这里一定要注意把处理的累积值accumulation一定要返回出去，所以reduce这个方法特别适合解决复杂的数组对象的处理。

第二个例子，取出数组中的最大值
比如数据如下：


const arr = [7,5,11,45,99,12,78,23,45,62,74,100];

解决这个问题也有很多方法，比如数组方法sort排序后然后取出第一个，或者Math.max()结合扩展运算符，或者循环遍历等等。那使用reduce如何解决，通过下面这个例子肯定可以更好的理解reduce
代码如下

const maxValue = arr.reduce((accumulation, currentValue) =>
  Math.max(accumulation, currentValue)
);

console.log(maxValue);

同样是回调函数中传入两个参数解决了问题，这次第二个累积值初始值就不需要传入，默认传入数组的第一个元素，然后从第二个元素开始执行回调函数，然后在回调函数中取出最大值然后返回出去

第三个例子,获取每个元素在数组中出现的次数
数据

const nameArray = ['david', 'frank', 'livia','frank','david','david','livia','frank','david','frank'];

使用reduce解决代码如下

const objValue = nameArray.reduce(
  (accumulation, currentValue, currentIndex, arr) => {
    accumulation[currentValue] = (accumulation[currentValue] || 0) + 1;
    return accumulation;
  },
  {}
);
console.log(objValue);

因为这个是想要统计每个元素在素组中出现的次数，所以第二个参数初始值传入一个空对象，然后回调函数中处理统计每个元素出现的次数，具体实现就是这样。

最后一个例子，对数据进行分组，根据grade，对不同年级进行的数据进行分组
数据：

const studentData = [
  { name: "Alice", grade: 1 },
  { name: "Bob", grade: 2 },
  { name: "Charlie", grade: 1 },
  { name: "David", grade: 3 },
  { name: "Eve", grade: 2 },
  { name: "Frank", grade: 3 },
];

使用reduce轻松解决：

// 对年级进行分类
const reduceStudent = studentData.reduce(
  (accumulation, currentValue, currentIndex, arr) => {
    Reflect.has(accumulation, currentValue.grade)
      ? accumulation[currentValue.grade].push(currentValue)
      : (accumulation[currentValue.grade] = [currentValue]);
    return accumulation;
  },
  {}
);

console.log(reduceStudent);