Web 开发
2022-07-14

Reduce 的用法与使用场景

次点击
9分钟阅读

Reduce 的用法与使用场景

ReduceArray 中内置的函数。相比于其他提供的函数,Reduce 的参数较多,是功能强大的一个方法,同时也在面试中常见的。

Reduce的功能很强大,可以模拟和替代 Array 别的函数,但是也不是必须使用 Reduce 还是得看具体情况。

概念

MDN 官方给出的解释为

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。 第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue ,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。 简单的举个例子:如计算数组元素的总和

const arr = [1, 2, 3, 4];
const result = arr.reduce((preValue, curValue) => preValue + curValue);
console.log('result', result);

语法

reduce(callbackFn, initialValue);

参数 reduce 接收两个参数

callbackFn 回调函数包含四个参数

  • previousValue:上一次调用 callbackFn时的返回值。在第一次调用时,若指定了初始值initialValue,则其值为 initialValue,否则为数组索引为 0 的元素 array[0]
  • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]
  • currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始
  • array:用于遍历的数组

initialValue:(可选)

作为第一次调用 callback函数时参数 previousValue **的值。若指定了初始值 initialValue ,则 currentValue则将使用数组第一个元素;否则 previousValue将使用数组第一个元素,而 currentValue将使用数组第二个元素

返回值

使用回调函数遍历整个数组后的结果

基本使用

reduce 方法的使用分为有无 initialValue

下面使用一个求数组和的例子演示一下

无 initialValue

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((preValue, curValue, curIndex, array) => {
  console.log('value', preValue, curValue, curIndex, array);
  return preValue + curValue;
});
console.log('result', result);

image.png

有 initialValue

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((preValue, curValue, curIndex, array) => {
  return preValue + curValue;
}, 100);
console.log('result', result);

image.png

使用场景

reduce 的使用场景很多,功能强大

数组求和

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((preValue, curValue, curIndex, array) => {
  return preValue + curValue;
}, 0);

数组对象求和

const arr = [{ x: 1 }, { x: 2 }, { x: 3 }, { x: 4 }, { x: 5 }];
const result = arr.reduce((preValue, curValue, curIndex, array) => {
  console.log('value', preValue, curValue, curIndex, array);
  return preValue + curValue.x;
}, 100);

数组去重

const arr = [1, 2, 1, 3, 4, 5, 3, 8];
let map = {};
const result = arr.reduce((preValue, curValue) => {
  if (!map[curValue]) {
    map[curValue] = true;
    preValue.push(curValue);
  }
  return preValue;
}, []);

二维数组转为一维数组

const arr = [
  [1, 2],
  [3, 4],
  [5, 6],
  [7, 8]
];
const result = arr.reduce((preValue, curValue) => {
  return preValue.concat(curValue);
});