如何在JavaScript中将嵌套对象数组转为一维数组并拼接path？

需要将一个嵌套对象数组转换为一维对象数组，最终数组中无需保留childrens字段，同时要拼接子元素的path值（子元素path基于父级path拼接）。

原数组 #

const data = [
{
    title: "Dashboard",
    icon: "Dashboard",
    page:"<Dashboard./>",
    path: "dashboard"                
},
{
    title: "Management",
    icon: "Management",
    page:"<Management/>",
    path: "manage",
    childrens:[
        {
            title: "Assets",
            icon: "Dot",
            page:"<Assetshome/>",
            path: "assets",
            childrens:[
        
                {
                    title: "MyAssets",
                    icon: "Dot",
                    page:"<Myassets/>",
                    path: "myassets"

                },
                {
                    title: "AddAssets",
                    icon: "Dot",
                    page:"<Addassets/>",
                    path: "addassets"

                }                    
            ]
        },
        {
            title: "Users",
            icon: "Dot",
            page: "<Users/>",
            path: "users"
        },
        {
            title: "Office",
            icon: "Dot",
            page:"<Office/>",
            path: "office"
        }            

    ]
},
{
    title: "Reports",
    icon: "Reports",
    page:"<Reports/>",
    path: "reports"
} 
]

期望输出的扁平化数组 #

const newdata = [
{
    title: "Dashboard",
    icon: "Dashboard",
    page:"<Dashboard/>",
    path: "dashboard"
            
},
{
    title: "Management",
    icon: "Management",
    page:"<Management/>",
    path: "manage"
},
{
    title: "Assets",
    icon: "Dot",
    page:"<Assetshome/>",
    path: "manage/assets"
},
        
{
    title: "MyAssets",
    icon: "Dot",
    page:"<Myassets/>",
    path: "manage/assets/myassets"

},
{
    title: "AddAssets",
    icon: "Dot",
    page:"<Addassets/>",
    path: "manage/assets/addassets"

},               
       
{
    title: "Users",
    icon: "Dot",
    page: "<Users/>",
    path: "users"
},
{
    title: "Office",
    icon: "Dot",
    page:"<Office/>",
    path: "office"
},   
{
    title: "Reports",
    icon: "Reports",
    page: "<Reports/>",
    path: "reports"
} 
]

实现方案：递归遍历拼接 #

递归是处理任意层级嵌套结构的最优方式之一，逻辑清晰且能适配不同深度的嵌套。具体实现代码如下：

function flattenMenu(data, parentPath = '') {
    let result = [];
    for (const item of data) {
        // 解构分离childrens字段，保留其他属性
        const { childrens, ...rest } = item;
        // 根据父级path拼接当前元素的完整path
        const currentPath = parentPath ? `${parentPath}/${rest.path}` : rest.path;
        // 将处理后的元素加入结果数组
        result.push({
            ...rest,
            path: currentPath
        });
        // 递归处理子元素（存在子元素时）
        if (childrens && childrens.length > 0) {
            result = [...result, ...flattenMenu(childrens, currentPath)];
        }
    }
    return result;
}

// 调用函数得到结果
const newdata = flattenMenu(data);

代码说明 #

• 用解构赋值直接剔除childrens字段，无需手动删除属性，代码更简洁。
• 递归调用时传递当前拼接好的path，确保子元素能基于父级路径生成完整路径。
• 扩展运算符...用来合并递归返回的子结果数组，写法直观易读。
• 适配任意深度的嵌套结构，不管子层级有多深都能正确遍历处理。

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