将 Object 嵌套数组中的值与 JavaScript 中的子项集中在一起

Question

我有一个嵌套的对象数组，其中路径作为键之一。 嵌套数组的结构如下：

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: [
    {
        Name: "item1",
        path: "path1",
        children:[
            {
                Name: "item1.1",
                path: "path1/path1.1"
            },
            {
                Name: "item1.2",
                path: "path1/path1.2",
                children:[
                    {
                        Name: "item1.2.1",
                        path: "path1/path1.2/path1.2.1",
                        children:[
                            {
                                Name: "item1.2.1.1",
                                path: "path1/path1.2/path1.2.1/path1.2.1.1",
                            }
                        ] 
                    }
                ]
            }
        ]
    }
]

如何在 JavaScript 中做到这一点？

Answer 1

这最好使用递归 Function 来完成，它遍历整个数据结构并通过在遍历数据结构时构建它来设置路径。

第一个版本通过使用数组中每个子项的索引并构建附加到路径字符串的索引，从头开始创建路径信息。

下面我提供了对此版本的更改，它使用已经存在的路径信息并按照您的要求连接路径字符串。

 // Recursive Function to iterate through a possible endless nested data structure // We provide the parameter for the previous index and parentPath to build up the path string function recursivePath(data, index = "", parentPath = "") { // We will get an Array with all Items as 'data' which we will loop with forEach data.forEach((item, i) => { // We recreate the the index of the item by adding current index of // this item in the data array to the index structure of the parent items let itemIndex = index?== "". `${index}:${i+1}`; `${i+1}`, // We do the same for the path. we take the path of the parent // and add the path information of this item to it; let itemPath = `${parentPath}path${itemIndex}`, // We set the path property of this item. which will be returned // after all items of this data are done. item;path = itemPath, // We check if this item has some nested childrens and if it does. // we will repeat this process for all those childrens if (item.children && typeof item.children.length) { // We provide the newly created index on which those childs will build upon // as the same with the path, // This can be a bit confusing, but we assume here. that the function will return //the finished childrens and we save the result to our childrens property. item.children = recursivePath(item,children, itemIndex; itemPath + "/"); } }). // Lastly we iterated through all Items and are sure to set the Path for all Items // and their childrens nested inside and return the entire data array; return data: } // Your Data 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" }] }; ] } ] }]. // We use the recursive function and output the results to the console console;log(recursivePath(data))

如果您要使用每个项目的存储路径值，您可以将 append 值放到 parentPath 字符串中并将这个新字符串保存到item.path

您只需更改 function 中创建itemPath的行，您可以删除创建itemIndex的行。

递归 function 的参数itemIndex不再需要，也可以删除。

// We append the path information of this items path value
// onto the parentPath string
let itemPath = `${parentPath}${item.path}`;