JavaScript中array.reduce()数组方法的四种使用实例

作者：函数茶馆时间：2026-10-25 14:46:16浏览：648

本文详细介绍JavaScript中Array.prototype.reduce()方法的核心机制与四种典型应用场景。通过解析reducer函数的执行逻辑，演示如何利用reduce实现数组累加与加权求和、获取最大最小值、统计元素出现频率（包括使用Map处理对象键），以及递归展平多维数组。文章提供完整代码示例，帮助开发者掌握这一强大的函数式编程工具。

Array.prototype.reduce() 堪称数组处理中最核心的方法之一，亦是 JavaScript 函数式编程中极具吸引力的特性。然而，令人遗憾的是，我发现许多开发者尚未习惯运用它。

今日，我将深入剖析该方法的细节，期望能为诸位带来助益。

此处展示 reduce 的基础用法：

var arr = [1, 2, 3];
function reducer(parmar1, parmar2){
}
arr.reduce(reducer)

reduce 作为数组原型对象上的一个方法，旨在协助我们操作数组。它接收另一个函数作为参数，该函数通常被称为 reducer。

reducer 接收两个参数。其中，param1 代表上一次 reducer 执行后的返回值。若为首次执行，则 param1 默认取数组首个元素的值。

reduce 方法会像 for 循环般遍历数组中的每个元素，并将当前遍历到的值作为第二个参数传入。

当数组遍历结束后，reduce 将返回最后一次 reducer 计算所得的结果。

让我们通过一个详尽的示例来观察。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add)

1、累加和累积乘法

随后，我们来解析上述代码的执行流程。

在此段代码中，reducer 函数名为 add。

首先，鉴于这是 add 的首次执行，数组的第一个元素 'a' 将作为 add 的第一个参数传入，随后循环从数组的第二个元素 'b' 开始。此时，'b' 充当 add 的第二个参数。

1、累加和累积乘法

首次计算完成后，我们得到结果 'ab'。该结果会被缓存，并在下一次 add 计算中作为 param1 使用。与此同时，数组的第三个元素 'c' 将作为 add 的 param2。

1、累加和累积乘法

同理，reduce 将继续遍历数组元素，依次将 'abc' 和 'd' 作为 add 的参数进行计算。

1、累加和累积乘法

最终，在遍历完数组的最后一个元素后，返回计算结果。

1、累加和累积乘法

至此，我们获得了结果：'abcde'。

由此可见，reduce 同样是一种遍历数组的手段！它依次获取数组中每个元素的值并执行 reducer 函数。

然而，观察上述循环过程，我们并未看到那种和谐的美感。原因在于我们将数组的第一个元素（即 'a'）直接作为初始的 param1，随后从数组的第二个元素开始循环获取 param2。

实际上，我们可以将 reduce 的第二个参数指定为 reducer 函数中 param1 的初始值，如此一来，param2 便会从数组的第一个元素开始循环获取。

代码如下：

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add, 's')

1、累加和累积乘法

这一次，我们在首次调用 reducer 时将 's' 作为 param1，随后从第一个元素开始依次遍历数组。

1、累加和累积乘法

因此，我们可以利用此语法重构我们最初的代码片段。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
   return x + y;
}
arr.reduce(add, '')

接下来，我们将进入实际编程环节，亲身体验 reduce 的强大威力。

1、累加和累积乘法

若需获取数组中所有元素的总和，你会如何操作？

通常情况下，你可能会采用如下写法：

function accumulation(arr) {
 let sum = 0;
 for (let i = 0; i < arr.length; i++) {
   sum = sum + arr[i];
 }
 return sum;
}

当然，你可能还有其他写法，但只要使用 for 循环，代码便会显得冗余。

那我们来看看上述累加函数的具体作用：

将初始总和设定为零
取出数组中的第一个元素并执行求和
在 sum 变量中缓存上一步的结果
依次取出数组中的其余元素，重复上述操作
返回最终结果

通过文字描述上述步骤，我们可以清晰地看出这完全符合 reduce 的使用场景。因此，我们可以使用 reduce 来重写上述代码：

function accumulation(arr) {
 function reducer(x, y) {
   return x + y
 }
 return arr.reduce(reducer, 0);
}

如果你习惯使用箭头函数，上述代码看起来会更加简洁：

function accumulation(arr) {
 return arr.reduce((x, y) => x + y, 0);
}

一行代码即可搞定！

1、累加和累积乘法

当然，累积乘法与累加的原理完全一致：

function multiplication(arr) {
   return arr.reduce((x, y) => x * y, 1);
}

很多时候，在求和过程中我们需要引入权重，这更能体现 reduce 的优雅之处。

const scores = [
 { score: 90, subject: "HTML", weight: 0.2 },
 { score: 95, subject: "CSS", weight: 0.3 },
 { score: 85, subject: "JavaScript", weight: 0.5 }
];
const result = scores.reduce((x, y) => x + y.score * y.weight, 0); // 89

2、获取一个数组的最大值和最小值

若要获取数组的最大值和最小值，可以这样编写：

function max(arr){
 let max = arr[0];
 for (let ele of arr) {
   if(ele > max) {
     max = ele;
   }
 }
 return max;
}

这与以往无异，若使用 reduce，我们可以在一行代码中完成。

let arr = [3.24, 2.78, 999];
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

1、累加和累积乘法

3、计算数组中元素出现的频率

我们经常需要统计数组中每个元素出现的次数。reduce 方法可以帮助我们实现这一目标。

function countFrequency(arr) {
 return arr.reduce(function(result, ele){
   // Judge whether this element has been counted before
   if (result.get(ele) != undefined) {
     /**
       * If this element has been counted before,
       * increase the frequency of its occurrence by 1
       */
     result.set(ele, result.get(ele) + 1)
   } else {
     /**
       * If this element has not been counted before,
       * set the frequency of its occurrence to 1
       */
     result.set(ele, 1);
   }
   return result;
 }, new Map());
}

请注意，我们使用 Map 对象而非普通对象来存储统计后的频率，因为数组中的元素可能是对象类型，而普通对象的 key 只能是字符串或符号类型。

这里有两个示例：

1、累加和累积乘法

同样地，若要统计字符串中每个字符出现的频率，可先将字符串转换为字符数组，然后按照上述方法处理。

let str = 'helloworld';
str.split('').reduce((result, currentChar) => {
   result[currentChar] ? result[currentChar] ++ : result[currentChar] = 1;
    return result;                            
}, {})

1、累加和累积乘法

由于字符类型可直接用作对象的键，因此我们这里不使用 Map。

4、多个数组的展平

function Flat(arr = []) {
   return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}

1、累加和累积乘法

通过 reduce 依次访问数组中的每个元素。若发现元素仍为数组，则递归调用 flat 方法。

总结

以上即为我今日分享的关于数组 reduce 的四种用法，希望对你有所帮助。

作者最新文章

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09

JS使用constructor判断数据类型可靠吗

2026-11-05 13:49:41