如何在JavaScript中拼接带children的嵌套对象数组的path值

你可以通过递归遍历的方式处理嵌套结构，在遍历过程中为每个子节点拼接父节点的完整路径，同时保留原数组的结构。以下是具体实现：

实现代码 #

function buildFullPaths(items, parentPath = '') {
  return items.map(item => {
    // 创建节点副本，避免修改原数据
    const newItem = {...item};
    // 拼接当前节点的完整路径
    newItem.path = parentPath ? `${parentPath}/${newItem.path}` : newItem.path;
    // 递归处理子节点
    if (newItem.children) {
      newItem.children = buildFullPaths(newItem.children, newItem.path);
    }
    return newItem;
  });
}

// 原数据
const data = [
    {
        Name: "item1",
        path: "path1",
        children:[
            {
                Name: "item1.1",
                path: "path1.1"
            },
            {
                Name: "item1.2",
                path: "path1.2",
                children:[
                    {
                        Name: "item1.2.1",
                        path: "path1.2.1",
                        children:[
                            {
                                Name: "item1.2.1.1",
                                path: "path1.2.1.1"
                            }
                        ] 
                    },
                ]
            }
        ]
    }
];

// 生成处理后的新数组
const newdata = buildFullPaths(data);
console.log(newdata);

代码说明 #

• 递归遍历：利用递归处理多层嵌套的children结构，确保每个层级的节点都能拿到父级的完整路径
• 避免修改原数据：通过扩展运算符{...item}创建节点副本，处理后的新数组不会影响原数据结构和内容
• 路径拼接逻辑：如果存在父级路径，就用/连接父路径与当前节点的path；根节点直接使用自身的path
• 兼容多层嵌套：无论嵌套层级有多深，递归都会自动遍历处理所有子节点

注意事项 #

如果你的节点对象包含函数、Symbol等特殊类型，扩展运算符的浅拷贝无法完整复制，此时可以改用JSON.parse(JSON.stringify(item))进行深拷贝，但要注意该方法会忽略函数、Symbol等无法被JSON序列化的内容。

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