基础介绍

概念

reduce() 方法对数组中的每个元素按序执行一个由您提供的reducer函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

参数

reduce()函数接受两个参数：

• reducer：回调函数
• initialValue：

reducer回调函数可以接受四个参数：

• pre：上一次调用reducer的返回值，如果指定了initialValue，则第一次循环中pre为initialValue
• cur：当前要遍历的数组元素
• index：当前遍历元素的下标
• array：当前遍历的数组

返回值

返回reducer函数最后一次return的结果。

基本使用

1. 如果有initialValue，则第一次循环中pre为initialValue，cur为数组的第一个元素

const array1 = [1, 2, 3, 4];
const res = array1.reduce((pre,cur,curIndex,arr)=>{
  console.log("pre:", pre,",cur:", cur,",curIndex:", curIndex,",arr:", arr);
  // pre: 1 ,cur: 2 ,curIndex: 1 ,arr: [ 1, 2, 3, 4 ]
  // pre: 3 ,cur: 3 ,curIndex: 2 ,arr: [ 1, 2, 3, 4 ]
  // pre: 6 ,cur: 4 ,curIndex: 3 ,arr: [ 1, 2, 3, 4 ]
  return cur+pre;
})
console.log(res); // 10

2. 如果没有initialValue，则第一次循环中pre为数组的第一个元素，cur为第二个元素

const array1 = [1, 2, 3, 4];
const res = array1.reduce((pre,cur,curIndex,arr)=>{
  console.log("pre:", pre,",cur:", cur,",curIndex:", curIndex,",arr:", arr);
  // pre: 0 ,cur: 1 ,curIndex: 0 ,arr: [ 1, 2, 3, 4 ]
  // pre: 1 ,cur: 2 ,curIndex: 1 ,arr: [ 1, 2, 3, 4 ]
  // pre: 3 ,cur: 3 ,curIndex: 2 ,arr: [ 1, 2, 3, 4 ]
  // pre: 6 ,cur: 4 ,curIndex: 3 ,arr: [ 1, 2, 3, 4 ]
  return cur+pre;
},0)
console.log(res); // 10

可以看出，给了初始值以后，会多加一次循环，因为遍历是从index=0开始遍历的

案例

求数组所有值的和

const array1 = [1, 2, 3, 4];
const total = array1.reduce((pre, cur) => pre + cur);
console.log(total); // 10

累加对象数组里的值

const sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce((pre, cur) => pre + cur.x, 0);

console.log(sum); // 6

计算数组中每个元素出现的次数

let names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];

let countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
}, {});

console.log(countedNames); // { Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

按照属性对object分类

let people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
];

function groupBy(objectArray, property) {
  return objectArray.reduce((pre, cur) => {
    let key = cur[property];
    if (!pre[key]) {
      pre[key] = [];
    }
    pre[key].push(cur);
    return pre;
  }, {});
}

let groupedPeople = groupBy(people, "age");

console.log(groupedPeople);
// {
//   '20': [ { name: 'Max', age: 20 }, { name: 'Jane', age: 20 } ],
//   '21': [ { name: 'Alice', age: 21 } ]
// }

数组去重

let myArray = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"];

let myArrayWithNoDuplicates = myArray.reduce((pre, cur) => {
  if (pre.indexOf(cur) === -1) {
    pre.push(cur);
  }
  return pre;
}, []);

console.log(myArrayWithNoDuplicates);

使用函数组合实现管道

// Building-blocks to use for composition
const double = (x) => x + x;
const triple = (x) => 3 * x;
const quadruple = (x) => 4 * x;

// Function composition enabling pipe functionality
const pipe =
  (...functions) =>
  (initialValue) =>
    functions.reduce((acc, fn) => fn(acc), initialValue);

// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240