本文介绍如何使用 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
}),
{}
)
}));✅ 核心逻辑解析：
- 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），语义清晰、链式友好，是处理此类「嵌套键值数组升维」场景的推荐实践。
