如何用 Object.groupBy 根据业务状态码对 API 返回的混合数据流进行高效分组

如何用 Object.groupBy 根据业务状态码对 API 返回的混合数据流进行高效分组

Object.groupBy 为什么不能直接用在 API 响应上

这事儿其实挺容易踩坑的。你可能会想，既然Object.groupBy是用来给数组分组的，那拿到API数据直接往里扔不就行了？但现实往往没那么简单。问题核心在于，Object.groupBy要求你传进去的是一个实实在在的可迭代对象，比如数组。而绝大多数API调用，比如fetch，返回的是一个Promise对象，它本身并不是数据。

如果你心急，直接写Object.groupBy(fetch('/api/logs'), x => x.status)，控制台马上就会给你一个TypeError: undefined is not iterable的错误。更常见的提示是Cannot use 'in' operator to search for 'length' in [object Promise]——这说白了，就是你把一个Promise当成数组传进去了。

所以，正确的操作顺序是绕不开的：

• 首先，必须用await或者.then()拿到响应体。
• 接着，调用.json()方法把响应体解析成Ja vaScript能处理的数组结构。
• 最后，还得确保这个结构是Object.groupBy能“吃”得下的。如果后端返回的是{ data: [...] }这种包装格式，你得先提取出res.data。如果返回的是流式JSON（比如NDJSON），那Object.groupBy就彻底没辙了，你得自己动手，用ReadableStream配合TextDecoder来逐行拆分处理。

正确分组前必须处理的三种响应结构

就算你成功拿到了数据数组，也别高兴太早。业务API返回的数据格式五花八门，Object.groupBy对输入结构又极其敏感。它的键函数一旦遇到undefined或null，就会默默地把这条数据归到undefined组里，导致状态码莫名其妙地“丢失”。

通常，你会遇到以下三种典型结构：

• 标准数组：这是最理想的情况，比如[{id:1,status:200},{id:2,status:500}]。这种情况下，直接调用Object.groupBy(data, x => x.status)即可。
• 带 data 字段的包装体：很多RESTful API喜欢这么干，返回{data:[...],total:10}。这时候，你得分两步走：先取res.data，再对这个数组进行分组。千万别漏了这层“包装”。
• 状态码嵌套在 detail 中：数据结构可能更深，比如{id:1,detail:{code:404}}。这时，你的键函数就得写得“聪明”一点：x => x.detail?.code ?? 0。这行代码用了可选链和空值合并运算符，能有效避免Cannot read property 'code' of undefined这种运行时错误。

这里还有个细节值得注意：分组键的类型必须统一。如果你用x.status，它返回的是数字；而用String(x.status)，返回的是字符串。在Ja vaScript里，数字200和字符串"200"是两个不同的键。一不小心，你就会得到{200:[...], "200":[...]}这样被拆成两组的混乱结果。

处理大流量混合数据时的性能与兼容性陷阱

想象一个场景：一次请求返回了上千条日志记录，其中99%的状态码都是200，剩下的1%零星散布在各种4xx和5xx错误中。这种情况下，Object.groupBy本身的计算效率不是问题，但后续的处理和兼容性却暗藏玄机。

先说兼容性。目前，Object.groupBy仅在Chrome 117+和Safari 17.4+等较新版本的浏览器中得到原生支持。如果你的用户还在使用Firefox或旧版Edge，这段代码就会直接报错。稳妥的做法是，要么引入core-js这样的polyfill库，要么准备好一个手写的降级函数。

再说性能。分组键函数会被调用N次（N是数组长度），所以千万别在里面执行耗时操作。比如，想按日志发生的“星期几”来分组，写成x => new Date(x.timestamp).getDay()就非常不明智。像状态码这种原始字段，才是最快、最安全的选择。

最后是业务逻辑。如果需要根据业务语义进行分组——例如，把401（未授权）和403（禁止访问）都归为“认证失败”类别——不要试图在Object.groupBy的键函数里写复杂的判断逻辑。更好的做法是，先通过.map()映射出一个新的、带有业务分组标签的数组，然后再对这个新数组进行分组。

这里提供一个兼容所有环境的降级写法，以备不时之需：

const groupBy = (arr, keyFn) => {
  const groups = {};
  for (const item of arr) {
    const key = keyFn(item);
    if (!groups[key]) groups[key] = [];
    groups[key].push(item);
  }
  return groups;
};

流式响应下无法直接用 Object.groupBy 的替代方案

当遇到服务器推送（Server-Sent Events）或NDJSON流这类实时数据流时，Object.groupBy就完全派不上用场了。因为它设计用来处理“一次性”的完整数组，无法应对数据“一点点到来”的增量场景。

这时，你需要换一套工具和思路：

• 使用ReadableStream和Response.body来接收数据流，配合TextDecoderStream进行解码。
• 每解析出一行有效的JSON数据，就立刻JSON.parse它，然后根据状态码，将其放入对应的分组中。这里，Map数据结构比普通对象更合适，因为它能保证键的顺序，并且性能更优。逻辑类似于：groups.get(x.status)?.push(x) ?? groups.set(x.status, [x])。
• 关键在于，要避免每次有新数据到来时，都重新计算整个分组对象。使用Map进行增量更新是唯一合理的选择。如果前端UI需要根据分组数据实时响应更新，可以结合Proxy或像valtio这样的响应式状态库来实现。

还有一个容易被忽略的点：在流式场景下，同一个状态码（比如500）可能会反复出现多次。你的分组逻辑必须是“幂等”的——也就是说，无论第几次遇到500错误，处理逻辑都应该一致，不能假设第一次出现的500就是“整个流中的第一个错误”。它可能只是当前这个数据块里的一个普通样本而已。