如何使用reduce实现树结构数据递归格式化，替代原有map实现方案

解决方案 #

你需要的children递归逻辑和原map版本完全一致，直接调用formatData2处理当前节点的子节点数组，再赋值给当前节点的children属性即可。

完整可运行代码 #

const formatData2 = (data) => {
    return data.reduce((acc, { haveNext, ...rest }) => {
        let news = {
            ...rest,
            // 若要匹配你给出的arr2预期结果，此处可修改为 isLeaf: haveNext ? true : false
            isLeaf: haveNext ? false : true
        }
        if (rest.children && rest.children.length > 0) {
            // 核心递归逻辑：处理当前节点的子节点
            news.children = formatData2(rest.children)
        } 
        // 用push替代concat性能更优，无需重新赋值acc
        acc.push(news)
        return acc
    }, [])
}

// 测试代码
let arr = [{
    title: 1,
    haveNext: false,
    children: [{
        title: 2,
        haveNext: true,
        children: [{
            title: 3,
            haveNext: true,
        }]
    }]
}]

console.log(formatData2(arr))

注意事项 #

你描述的规则和给出的预期输出存在冲突：

• 你描述的规则：haveNext为true时isLeaf为false，否则为true
• 按该规则计算，原数组中haveNext: true的title2、title3节点的isLeaf应为false，但你给出的预期arr2中这两个节点的isLeaf是true，如果需要匹配预期结果，修改isLeaf的赋值逻辑即可。

内容的提问来源于stack exchange，提问作者李大白白