阿波罗的战车
如果我们稍微抽象一下,就可以很容易地编写一个通用的树映射函数。然后我们可以提供两个回调函数:一个查找输入的子节点,一个根据输入和映射的子节点构建输出节点。事实证明,这样的函数出奇的简单:const mapTree = (getChildren, transformNode) => (tree) => transformNode ( tree, (getChildren (tree) || []) .map (mapTree (getChildren, transformNode)) )对于您的数据,getChildren简直就是(node) => node._children节点转换可能很简单:const transformNode = (node, children) => ({ id: node.$id, // or a randomizing call? text: node.name, icon: "fas fa-plus", // is this really a fixed value? subNode: children })把这些放在一起,我们得到const mapTree = (getChildren, transformNode) => (tree) => transformNode ( tree, (getChildren (tree) || []) .map (mapTree (getChildren, transformNode)) )const kids = (node) => node._childrenconst transformNode = (node, children) => ({ id: node.$id, text: node.name, icon: "fas fa-plus", subNode: children })const myTransform = mapTree (kids, transformNode)const jsonData = { "$id": "45", "_children": [{ "$id": "46", "_children": [{ "$id": "47", "_children": [{ "$id": "48", "_children": [{ "$id": "49", "_children": null, "id": "Test1", "text": "Text1", "name": "name1", "parent": null, "root": { "$ref": "49" }, "depth": 0, "children": [] }], "id": "id1", "text": "text2", "name": "name2", "parent": null, "root": { "$ref": "48" }, "depth": 0, "children": [{ "$ref": "49" }] }], "id": "id3", "text": "text4", "name": "name4", "parent": null, "root": { "$ref": "47" }, "depth": 0, "children": [{ "$ref": "48" }] }, { "$id": "50", "_children": [{ "$id": "51", "_children": [{ "$id": "52", "_children": null, "id": "id6", "text": "text6", "name": "name6", "parent": null, "root": { "$ref": "52" }, "depth": 0, "children": [] }], "id": "id7", "text": "text7", "name": "name7", "parent": null, "root": { "$ref": "51" }, "depth": 0, "children": [{ "$ref": "52" }] }], "id": "id8", "text": "text8", "name": "name8", "parent": null, "root": { "$ref": "50" }, "depth": 0, "children": [{ "$ref": "51" }] }], "id": "id9", "text": "text9", "name": "name9", "parent": null, "root": { "$ref": "46" }, "depth": 0, "children": [{ "$ref": "47" }, { "$ref": "50" }] }, { "$id": "53", "_children": [{ "$id": "54", "_children": null, "id": "id10", "text": "text10", "name": "name10", "parent": null, "root": { "$ref": "54" }, "depth": 0, "children": [] }], "id": "id11", "text": "text11", "name": "name11", "parent": null, "root": { "$ref": "53" }, "depth": 0, "children": [{ "$ref": "54" }] }], "id": "0", "text": "0", "name": "", "parent": null, "root": { "$ref": "45" }, "depth": 0, "children": [{ "$ref": "46" }, { "$ref": "53" }] }console .log (myTransform (jsonData))这与您请求的输出略有不同。你写了subNode: { ... },但我返回了一个对象数组,subNodes: [ ... ],因为我在这里没有任何真正意义上的普通对象。此外,subNodes如果输入节点没有子节点,这将产生一个空数组。如果您不想拥有该subNodes财产,则可以更换 subNode: children像 ...(children .length ? {subNode: children} : {})显然,您不需要命名的助手,并且可以mapTree使用如下匿名函数进行调用:const myTransform = mapTree ( (node) => node._children, (node, children) => ({ id: node.$id, text: node.name, icon: "fas fa-plus", subNode: children }))这个mapTree函数很容易编写,因为我在编写它时不必考虑输出或输入格式的任何细节。但也许这种抽象对我没有帮助,除了这里我永远不会使用它。如果是这样,我可以通过直接插入硬编码回调来简单地重新设计抽象版本。只需稍加操作,即可将其变成这个版本:const newTransform = (node) => ({ id: node.$id, text: node.name, icon: "fas fa-plus", subNode: (node._children || []).map(newTransform) })const jsonData = { "$id": "45", "_children": [{ "$id": "46", "_children": [{ "$id": "47", "_children": [{ "$id": "48", "_children": [{ "$id": "49", "_children": null, "id": "Test1", "text": "Text1", "name": "name1", "parent": null, "root": { "$ref": "49" }, "depth": 0, "children": [] }], "id": "id1", "text": "text2", "name": "name2", "parent": null, "root": { "$ref": "48" }, "depth": 0, "children": [{ "$ref": "49" }] }], "id": "id3", "text": "text4", "name": "name4", "parent": null, "root": { "$ref": "47" }, "depth": 0, "children": [{ "$ref": "48" }] }, { "$id": "50", "_children": [{ "$id": "51", "_children": [{ "$id": "52", "_children": null, "id": "id6", "text": "text6", "name": "name6", "parent": null, "root": { "$ref": "52" }, "depth": 0, "children": [] }], "id": "id7", "text": "text7", "name": "name7", "parent": null, "root": { "$ref": "51" }, "depth": 0, "children": [{ "$ref": "52" }] }], "id": "id8", "text": "text8", "name": "name8", "parent": null, "root": { "$ref": "50" }, "depth": 0, "children": [{ "$ref": "51" }] }], "id": "id9", "text": "text9", "name": "name9", "parent": null, "root": { "$ref": "46" }, "depth": 0, "children": [{ "$ref": "47" }, { "$ref": "50" }] }, { "$id": "53", "_children": [{ "$id": "54", "_children": null, "id": "id10", "text": "text10", "name": "name10", "parent": null, "root": { "$ref": "54" }, "depth": 0, "children": [] }], "id": "id11", "text": "text11", "name": "name11", "parent": null, "root": { "$ref": "53" }, "depth": 0, "children": [{ "$ref": "54" }] }], "id": "0", "text": "0", "name": "", "parent": null, "root": { "$ref": "45" }, "depth": 0, "children": [{ "$ref": "46" }, { "$ref": "53" }] }console .log (newTransform (jsonData))这里有一个重要的点。这个通用函数比我尝试编写一些东西来直接转换格式要容易得多。虽然过早的抽象存在危险,但它也可以提供显着的好处。我可能会选择只保留最后一个版本,但通用抽象简化了它的开发。