如何map遍历嵌套数组提取最深层sub_data组装指定结构

实现要求 #

• 基于map方法遍历带多层sub_data字段的嵌套数组
• 提取最末层sub_data的所有数据存入结果数组
• 取第三层sub_data的title值，作为最末层数据的category字段
• 最终组装为指定格式的新结构

实现代码 #

// 原始嵌套数组
const sourceList = [{
    "id": 2,
    "title": "Logo",
    "sub_data": [
        {
            "id": 5,
            "title": "Facebook",
            "sub_data": [
                {
                    "id": 6,
                    "title": "People",
                    "sub_data": [
                        {
                            "id": 7,
                            "title": "Gardening",
                        }
                    ],
                },
            ],
        }
    ]
}];

// 转换逻辑
const targetList = sourceList.map(rootItem => {
    // 逐层向内遍历sub_data，拍平嵌套数组得到最终叶子节点数据
    const leafItems = rootItem.sub_data
        .map(secondLayerItem => secondLayerItem.sub_data
            .map(thirdLayerItem => thirdLayerItem.sub_data
                .map(leafItem => ({
                    id: leafItem.id,
                    title: leafItem.title,
                    category: thirdLayerItem.title
                }))
            ).flat()
        ).flat();

    return {
        id: rootItem.id,
        title: rootItem.title,
        data: leafItems
    }
});

输出验证 #

执行代码后打印targetList，得到的结果和预期完全一致：

[{
  title: 'Logo',
  id: 2,
  data: [{
    id: 7,
    title: 'Gardening',
    category: 'People'
  }]
}]

如果后续嵌套层级不是固定的4层结构（根节点+3层sub_data），可以把逐层遍历的逻辑替换为递归遍历，自动判断节点下是否存在sub_data字段即可适配动态层级场景。

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