js中的reduce函数详细解释

目录

一、数组求和

二、数组去重

三、合并二维数组

四、统计出现的次数

五、按类型进行分类

---

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。循环遍历能做的，reduce都可以做。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

用法： 

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

一、数组求和

不设置初始值时，数组的第一项就会默认为初始值，下面的例子执行三次；

// 3 + 2

// 5 + 1

// 6 + 7

const numbers = [3, 2, 1, 7];
const sum = numbers.reduce((total, currentValue) => {
  console.log(total, currentValue);
  return total + currentValue;
});
console.log(sum);
// 3 2
// 5 1
// 6 7
// 13

 设置初始值时，下面的例子执行四次；

// 0 + 3

// 3 + 2

// 5 + 1

// 6 + 7

const numbers = [3, 2, 1, 7];
const sum = numbers.reduce((total, currentValue) => {
  console.log(total, currentValue);
  return total + currentValue;
}, 0);
console.log(sum);
// 0 3
// 3 2
// 5 1
// 6 7
// 13

二、数组去重

const numbers = [3, 2, 1, 7, 3, 5, 7];
const resArr = numbers.reduce((prev, currentValue) => {
  if (prev.indexOf(currentValue) === -1) {
    prev.push(currentValue);
  }
  return prev;
}, []);
console.log(resArr); // [3, 2, 1, 7, 5]

三、合并二维数组

const numbers = [[3, 2], [1, 7], [3, 5], [7]];
const resArr = numbers.reduce((prev, currentValue) => {
  return prev.concat(currentValue);
}, []);
console.log(resArr); // [3, 2, 1, 7, 3, 5, 7]

四、统计出现的次数

const arr = ["a", "b", "c", "a", "b"];
const resArr = arr.reduce((prev, currentValue) => {
  if (prev[currentValue]) {
    prev[currentValue]++;
  } else {
    prev[currentValue] = 1;
  }
  return prev;
}, {});
console.log(resArr); // { a: 2, b: 2, c: 1 }

五、按类型进行分类

const arr = [
  {
    name: "Apple",
    num: 12,
  },
  {
    name: "Apple",
    num: 13,
  },
  {
    name: "Banana",
    num: 14,
  },
];
const resArr = arr.reduce((prev, currentValue) => {
  // 根据name进行分类
  var key = currentValue["name"];
  if (!prev[key]) {
    prev[key] = [];
  }
  prev[key].push(currentValue);
  return prev;
}, {});
console.log(resArr);
// {
//   Apple: [ { name: 'Apple', num: 12 }, { name: 'Apple', num: 13 } ],
//   Banana: [ { name: 'Banana', num: 14 } ]
// }