前端JavaScript：无for循环转换多对象JSON为指定数组的最优方法

问题背景 #

给定如下JSON响应数据：

[
    {
        "week":1,
        "win":10,
        "lose":[
            {
                "week":2,
                "count":1
            },
            {
                "week":3,
                "count":0
            }
        ]
    },
    {
        "week":2,
        "win":7,
        "lose":[
            {
                "week":3,
                "count":1
            },
            {
                "week":4,
                "count":3
            }
        ]
    },
    {
        "week":3,
        "win":8,
        "lose":[
            {
                "week":4,
                "count":1
            }
        ]
    }
]

需要将其转换为包含win数值及lose数组中count数值的二维数组，期望输出如下：

[
[10,1,0],
[7,1,3],
[8,1]
]

要求在前端实现，且无需使用for循环，求最优实现方式。

实现方案 #

可以利用数组的map方法结合解构赋值，搭配嵌套map提取count值，最后通过展开运算符合并结果，完全避免显式for循环：

// 假设originalData是你的原始JSON数据
const result = originalData.map(({ win, lose }) => [
  win,
  ...lose.map(item => item.count)
]);

方案说明 #

1. 外层map遍历原始数组的每个对象，通过对象解构直接取出win和lose属性，省去手动访问属性的步骤
2. 对lose数组使用内层map，快速提取每个元素的count值，得到纯数值数组
3. 用ES6展开运算符...将win值和提取出的count数组合并成一个新数组，最终生成目标二维数组

这种实现方式简洁高效，完全基于数组高阶函数，代码可读性强，是前端场景下的最优解之一。

内容的提问来源于stack exchange，提问作者Deric