本文介绍如何使用 javascript 的 `map()`、解构赋值与 `reduce()` 配合计算属性名，将数组中每个对象的 `stats` 子数组（含 `statname`/`statvalue` 结构）扁平化展开为同级字段，实现嵌套统计项到根对象的优雅提升。

在处理结构化数据（如运动员统计信息、API 响应或仪表盘指标）时，常遇到类似这样的嵌套模式：核心实体字段（如 playerName、rank）与动态统计项（stats 数组）分离存储。但前端渲染、表格展示或后续分析往往需要所有字段处于同一层级——即把 [{statName: "Avg", statValue: "70.356"}] 这类结构直接“升维”为 "Avg": "70.356" 形式的顶层属性。

解决该问题的关键在于解构 + 展开 + 动态键合并。以下是一段简洁、可复用的函数式实现：

const flattenStats = (data) =>
  data.map(({ stats, ...rest }) => ({
    ...rest,
    ...stats.reduce(
      (acc, { statName, statValue }) => ({
        ...acc,
        [statName]: statValue
      }),
      {}
    )
  }));

✅ 核心逻辑解析：

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

• map() 遍历每个玩家对象；
• 解构 { stats, ...rest } 提取 stats 数组并保留其余字段（playerName, country, rank 等）；
• reduce() 将 stats 数组逐项累积为一个新对象：每次迭代用计算属性 [statName] 作为键、statValue 作为值，合并进累加器 acc；
• 最终通过 ...acc 展开，与 ...rest 合并为单层对象。

⚠️ 注意事项：

• 若多个 statName 重复（如某球员 stats 中存在两个 "Avg"），后出现的值会覆盖前者（符合 reduce 累积行为）；如需去重或报错，建议前置校验：new Set(stats.map(s => s.statName)).size === stats.length；
• statName 必须为合法对象键（字符串或可转为字符串的类型），若含空格、特殊符号或中文（本例中允许），无兼容性问题；但若需作为变量名使用（如生成代码），需额外做 key 规范化；
• 性能方面，reduce 内频繁对象展开（{...acc, [k]: v}）在大数据量下略低效；如需极致性能，可改用 Object.assign(acc, { [statName]: statValue }) 或初始化空对象后直接赋值。

该方案不依赖外部库，兼容现代浏览器及 Node.js（≥12），语义清晰、链式友好，是处理此类「嵌套键值数组升维」场景的推荐实践。