JS 中 reduce 的常见用法

JavaScript 中的 reduce 方法是数组的一个高阶函数，用于将数组中的所有元素归纳为单一的输出值。

常见用法

数组求和

在回调函数中返回 accumulator（上次循环回调函数的返回值） 与 currentValue（本次循环数组的成员变量） 的和，可以实现求数组的求和

const array = [1, 2, 3, 4];

// 计算数组元素的总和
const sum = array.reduce(
	(accumulator, currentValue) => accumulator + currentValue, 
	0
);

console.log(sum); // 输出：10

数组求最值

在回调函数中返回 accumulator（上次循环回调函数的返回值） 与 currentValue（本次循环数组的成员变量）的最大值或者最小值，可以实现求数组的最值

const arr = [1, 2, 3, 4];
// 最大值
const max = arr.reduce(function (acc, cur) {
    return Math.max(acc,cur);
});

console.log(max); // 输出：4

// 求最小值
const min = arr.reduce(function (acc, cur) {
    return Math.min(acc,cur);
});

console.log(min); // 输出：1

数组去重

将reduce 函数的第二个 初始值 参数，设置为数组时，可以利用数组的查询方法（ 如： indexOf）来实现对原始数组的去重 。

const arr = [1, 4, 3, 2, 3, 4];
var disArr = arr.reduce(function (acc, cur) {
    acc.indexOf(cur) === -1 && acc.push(cur);
    return acc;
},[]);
console.log(disArr); // 输出：[1, 4, 3, 2]

处理对象数组

reduce 也可以用来合并对象数组中的对象，或者将对象的属性值累加。

const objectsArray = [{x: 1}, {y: 2}, {z: 3}];

// 合并对象数组中的对象
const mergedObject = objectsArray.reduce((accumulator, currentValue) => {
  return {...accumulator, ...currentValue};
}, {});

console.log(mergedObject); // 输出：{x: 1, y: 2, z: 3}

下面详细解释 reduce 的用法：

语法结构

reduce函数参数

reduce 方法接受两个参数：

• 回调函数
• 初始值（可选）

arr.reduce(
	// 回调函数
	function(accumulator,currentValue,currentIndex,arr){
		// 相关业务代码
		...
	}, 
	// 初始值（可选）
	init 
);

回调函数参数

回调函数本身接受四个参数，但最常用的是两个参数：累加器（accumulator）和当前值（currentValue）。

• accumulator（累加器）：累计处理的结果，初始值由 reduce 的第二个参数（initialValue）决定，之后由上一次回调的返回值决定。
• currentValue（当前值）：数组中正在处理的元素。
• currentIndex（可选）：数组中正在处理的当前元素的索引。
• array（可选）：调用 reduce 的数组本身。

使用初始值

如果不提供初始值，reduce 将从数组的第一个元素开始执行回调函数，并将第一个元素作为初始的累加器值。

const array = [1, 2, 3, 4];

// 不提供初始值，累加器从数组第一个元素开始
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // 输出：10

使用初始值和索引

const array = [1, 2, 3, 4];

// 使用初始值和索引
const sumWithIndex = array.reduce((accumulator, currentValue, currentIndex) => {
  console.log(`当前索引：${currentIndex}, 当前值：${currentValue}`);
  return accumulator + currentValue;
}, 10); // 初始值设为10

console.log(sumWithIndex); // 输出：20

处理空数组

如果 reduce 被用在一个空数组上，且没有提供初始值，将会抛出一个 TypeError。如果提供了初始值，则返回初始值。

const emptyArray = [];

// 会抛出错误，因为没有提供初始值
try {
  emptyArray.reduce((accumulator, currentValue) => accumulator + currentValue);
} catch (error) {
  console.error(error);
}

// 正确使用，返回初始值
const resultWithInitialValue = emptyArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(resultWithInitialValue); // 输出：0

注意事项

• 确保在使用 reduce 时，如果数组为空且没有提供初始值，要处理可能抛出的错误。
• 当处理非常大的数组时，注意回调函数的性能，避免造成性能瓶颈。
  reduce 是一个非常强大且灵活的方法，可以用于多种场景，从简单的累加到复杂的数据处理和转换。理解其工作原理和参数使用，可以帮助你写出更高效、更简洁的代码。