JavaScript 中怎么使用 Array.prototype.reduce 聚合处理接口数据-js教程-PHP中文网

reduce核心是将数组逐步合并为一个结果，需明确定义初始值和每步更新逻辑，适用于求和、分组、去重、扁平化等聚合场景，关键在accumulator类型与初始值匹配。

javascript 中怎么使用 array.prototype.reduce 聚合处理接口数据

用 reduce 处理接口返回的数组数据，核心是把它当作“把一堆值逐步合并成一个结果”的工具——比如求和、分组、扁平化、统计、转对象等。关键不是循环，而是定义好“初始值”和“每一步怎么更新这个值”。

基础结构：记住两个参数

reduce 接收一个回调函数和一个可选的初始值：

回调函数：接收四个参数，常用前两个 —— (accumulator, current)，即“上一轮的结果”和“当前项”
初始值（第二个参数）：建议显式传入，避免对空数组报错或类型意外（比如没传时第一项当 accumulator，类型可能不对）

常见聚合场景与写法

1. 求和 / 累计数值
接口返回商品列表，要算总价：

const items = [{ name: '苹果', price: 5.5 }, { name: '香蕉', price: 3.2 }];
const total = items.reduce((sum, item) => sum + item.price, 0); // 8.7

2. 按字段分组（转为对象）
后端返回平铺数据，想按 category 归类：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const list = [
  { id: 1, name: 'A', category: 'fruit' },
  { id: 2, name: 'B', category: 'veg' },
  { id: 3, name: 'C', category: 'fruit' }
];

const grouped = list.reduce((obj, item) => {
  const key = item.category;
  if (!obj[key]) obj[key] = [];
  obj[key].push(item);
  return obj;
}, {}); 
// { fruit: [...], veg: [...] }

3. 提取唯一值并去重
从用户列表中提取所有不重复的部门：

const users = [{ dept: 'tech' }, { dept: 'design' }, { dept: 'tech' }];
const depts = users.reduce((set, user) => {
  set.add(user.dept);
  return set;
}, new Set());

Array.from(depts); // ['tech', 'design']

4. 扁平化嵌套数组（如评论树）
接口返回带子评论的层级结构，想拉平成一维列表：

const comments = [
  { id: 1, content: '好', replies: [] },
  { id: 2, content: '不错', replies: [{ id: 21, content: '同意' }] }
];

const flat = comments.reduce((arr, comment) => {
  arr.push(comment);
  arr.push(...comment.replies); // 展开子项
  return arr;
}, []);
// [{id:1}, {id:2}, {id:21}]

处理异步或需校验的数据

reduce 本身不同步，但可以配合 Promise 链做串行聚合（较少见），更常见的是先 filter 再 reduce：

过滤无效项：data.filter(Boolean).reduce(...)
跳过空字段：item.status === 'active' && (acc.push(item), acc) || acc（不推荐写法太绕，建议用 if）
安全取值：reduce((acc, item) => { const val = item?.score ?? 0; return acc + val; }, 0)