分享 js 中 reduce 函数的一些灵活用法,用这一个函数就能够实现数组中许多常用方法的功能,带你感受 reduce 的强大之处!
reduce 介绍
reduce
是 JavaScript 数组的一个高阶函数,它用于将数组的每个元素按照指定的方式进行归约(合并)操作。
reduce
接受两个参数:
callback
回调函数,它执行数组的归约逻辑。initialValue
初始累加器的值,可选,如果未提供初始值,则将使用数组的第一个元素作为初始值,然后从第二个元素开始进行归约。
callback
回调函数接受四个参数:
- 累加器(accumulator):用于累积回调函数的返回值。它在每次调用回调函数时更新。
- 当前值(current value):正在处理的当前元素。
- 当前索引(current index):正在处理的当前元素的索引。
- 原始数组(array):调用 reduce() 方法的数组。
简单示例
求和:使用
reduce
函数计算数组元素总和
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0
);
console.log(sum); // 输出:15
更多用法
reduce 函数具有很强的灵活性,接下来实现一些常用的数组方法
Array.includes
,numbers 中是否存在数值 3
const numbers = [1, 2, 3, 4, 5];
const isExist = numbers.reduce(
(includes, cur) => (includes ? includes : cur === 3),
false
);
console.log(isExist); // 输出:true
Array.slice
,将 numbers 中索引 0~4 之间的值截取并组成新的数组
const numbers = [1, 2, 3, 4, 5];
const newNums = numbers.reduce(
(arr, cur, index) => (index > 0 && index < 4 ? [...arr, cur] : arr),
[]
);
console.log(newNums); // 输出:[2, 3, 4]
Array.map
,将 numbers 数组中的值都乘以 100
const numbers = [1, 2, 3, 4, 5];
const newNums = numbers.reduce((arr, cur) => [...arr, cur * 100], []);
console.log(newNums); // 输出:[100, 200, 300, 400, 500]
Array.filter
,过滤掉 numbers 中小于 3 的数
const numbers = [1, 2, 3, 4, 5];
const newNums = numbers.reduce(
(arr, cur) => (cur >= 3 ? [...arr, cur] : arr),
[]
);
console.log(newNums); // 输出:[3, 4, 5]
Array.find
,找到值为 3 的 item 项
const numbers = [1, 2, 3, 4, 5];
const findItem = numbers.reduce((acc, cur) => {
if (acc === undefined && cur === 3) {
return cur;
}
return acc;
}, undefined);
console.log(findItem); // 输出:3
Max and Min
,获取 numbers 中的最大值和最小值
const numbers = [1, 2, 3, 4, 5];
const maxAndMin = numbers.reduce(
({ max, min }, cur) => ({
max: Math.max(max, cur),
min: Math.min(min, cur),
}),
{ max: -Infinity, min: Infinity }
);
console.log(maxAndMin); // 输出:{max: 5, min: 1}
总结
reduce
是处理数组的强大工具,核心思想是 “归约” —— 将数组元素通过某种逻辑合并成一个结果。
虽然说只用这一个函数就能够实现数组中许多常用方法的功能,例如:map
、filter
、find
等等,但是本文的目的并不是真的让你去用 reduce 替代这些函数,而是为了让你更深入的了解 reduce 函数!