JS reduce实现数组求和、最大值与字符串拼接示例

在 JavaScript 中，Array.prototype.reduce() 能够按顺序遍历数组元素，并通过累加器将整个数组收敛为一个确定值。掌握 reduce 的关键在于明确回调函数的四个参数及初始值的作用。本文将直接聚焦三大最常见的高频场景——数组求和、提取最大值与格式化字符串拼接，结合完整代码与图解，系统讲解其执行流程与边界处理技巧。

图 1：reduce 在求和、最大值与字符串拼接场景下的行为映射概览

一、reduce 的基本语法与内部迭代机制

reduce 方法接收两个核心参数：一个回调函数（reducer）和一个可选的初始值（initialValue）。回调函数在每次遍历时被执行，并将上一轮的计算结果带入下一轮。

arr.reduce((accumulator, currentValue, currentIndex, array) => {
  // 返回的值将作为下一轮遍历的 accumulator
  return nextAccumulator;
}, initialValue);

• accumulator（累加器）：上一次回调函数返回的值。若提供了 initialValue，首次执行时即为该值；若未提供，首次执行时为数组第一个元素。
• currentValue（当前元素）：数组中当前正在处理的元素。
• currentIndex（当前索引）：当前元素在原数组中的下标。若提供了 initialValue，从 0 开始；若未提供，从 1 开始。
• array（原数组）：调用 reduce 的原始数组对象。

图 2：reduce 迭代周期中累加器（accumulator）在各步骤的输入与输出流转

二、示例一：实现数组求和

求和是 reduce 最典型的应用场景。累加器初始化为数值 0，每次将当前数值累加并返回。

1. 基础求和代码

// 基础数值数组求和
const numbers = [12, 45, 7, 23, 56];

const sum = numbers.reduce((acc, cur) => acc + cur, 0);

console.log("求和结果:", sum);

2. 对象数组中提取属性求和

在实际开发中，数据往往以对象数组的形式存在（例如购物车商品列表）。此时必须显式设置 initialValue 为 0，否则第一次执行时 acc 会取到整个对象，导致 [object Object] + 10 的类型错误。

const cart = [
  { name: "机械键盘", price: 299, count: 1 },
  { name: "无线鼠标", price: 129, count: 2 },
  { name: "显示器支架", price: 199, count: 1 }
];

// 计算购物车总金额：累加 price * count
const totalPrice = cart.reduce((total, item) => {
  return total + item.price * item.count;
}, 0);

console.log("总金额:", totalPrice);

三、示例二：提取数组中的最大值

除了算术累加，reduce 还可以用于状态对比与极值筛选。累加器在每轮迭代中保存“截至目前发现的最大值”，当前元素若大于该值则替换，否则保留。

1. 三元运算符对比实现

const scores = [65, 88, 92, 73, 99, 81];

const maxScore = scores.reduce((max, cur) => {
  return cur > max ? cur : max;
});

console.log("最高分:", maxScore);

2. 结合 Math.max 的简洁写法

由于 Math.max(a, b) 能直接返回两数中较大者，reducer 可以进一步精简为一行表达式：

const temperatures = [-5, 3, 14, -2, 8, 22, 11];

// 利用 Math.max 连续折叠对比
const maxTemp = temperatures.reduce((acc, cur) => Math.max(acc, cur));

console.log("最高温度:", maxTemp);

图 3：叠加模式与筛选模式在 reduce 内部的状态演化差异

3. 求最大值时关于初始值的特别注意

在求最大值时，切勿随意将 initialValue 设为 0。如果原数组所有数值都是负数（如 [-10, -25, -3]），若初始值设为 0，最终计算结果会错误地得到 0。正确的做法是：

• 做法 A（推荐）：不传 initialValue，直接让 reduce 以 arr[0] 作为起点；
• 做法 B：显式传入 -Infinity 作为初始值。

四、示例三：实现字符串格式化拼接

虽然简单的纯字符串拼接可以通过 Array.prototype.join() 快捷完成，但在需要动态添加序号、前后缀转换、条件过滤或拼接复杂 HTML 模板时，reduce 具有更加灵活的控制力。

1. 拼接带分隔符的列表（排除首尾多余标点）

在凭借英文逗号加空格的字符串时，难点往往在于第一项或最后一项不能有多余的逗号。借助 currentIndex 可以干净利落地处理：

const cities = ["北京", "上海", "广州", "深圳"];

// 方案一：通过 index 判断是否为首项
const result1 = cities.reduce((acc, cur, index) => {
  return index === 0 ? cur : `${acc}、${cur}`;
}, "");

console.log("顿号拼接结果:", result1);

2. 生成带序号的排行榜与多行文本

利用累加器逐行追加文本，可以快速构建结构化报表或 Markdown 列表：

const skills = ["JavaScript", "HTML5", "CSS3", "Vue.js"];

const rankingList = skills.reduce((acc, cur, index) => {
  const line = `${index + 1}. ${cur}`;
  return acc ? `${acc}\n${line}` : line;
}, "");

console.log(rankingList);

3. 生成 HTML 标签模板字符串

在动态生成网页结构时，通过 reduce 可以将对象数据转换为标准的 HTML 片段：

const navLinks = [
  { text: "首页", url: "/home" },
  { text: "文档", url: "/docs" },
  { text: "关于", url: "/about" }
];

const htmlList = navLinks.reduce((html, link) => {
  return `${html}  
${link.text}
\n`;
}, "
\n") + "
";

console.log(htmlList);

图 4：字符串拼接的流水线构建与边界分隔控制机制

五、三大场景综合对比与核心避坑指南

为了让读者在实际编码中快速选择最合理的书写方式，下表将本文三大核心场景的参数策略与边界考量进行了系统梳理：

图 5：reduce 最佳实践、边界防范与选型决策全景图

综上所述，reduce 并不是简单替代 for 循环的语法糖，而是一种将离散序列聚合为单一结果的函数式抽象。在求和中，它展现了无损累加的能力；在求最大值中，它体现了状态筛选的灵活性；在字符串拼接中，它赋予了精细控制文本结构的可能。只要牢记初始值的设定逻辑并妥善处理空数组边界，reduce 就能成为日常开发中兼具表现力与稳健性的实用利器。