如何改进这个将平面数组转换为树的功能？

Question

我有这个函数可以根据 path 属性将平面数组转换为树。

这是我的数据：

  const input = [
    {"name":"brussels_district_north","path":"Brussels/Brussels CBD/North"},
    {"name":"brussels_district_louise","path":"Brussels/Brussels CBD/Louise"},
    {"name":"brussels_district_west","path":"Brussels/Brussels Decentralised/West"},
    {"name":"brussels_district_léopold","path":"Brussels/Brussels CBD/Léopold"},
    {"name":"brussels_district_airport","path":"Brussels/Brussels Periphery/Airport"},
    {"name":"brussels_district_ring","path":"Brussels/Brussels Periphery/Ring"},
    {"name":"brussels_district_walloon-brabant","path":"Brussels/Brussels Decentralised/Walloon Brabant"},
    {"name":"brussels_district_centrum","path":"Brussels/Brussels CBD/Centre"},
    {"name":"brussels_district_midi","path":"Brussels/Brussels CBD/Midi"},
    {"name":"brussels_district_south","path":"Brussels/Brussels Decentralised/South"},
    {"name":"brussels_district_ north_east","path":"Brussels/Brussels Decentralised/North East"},
  ]

然后是“变换”功能：

  const output = [];

  //make a tree out of this data
  input.reduce((r, item) => {
    item.path.split(/(?=\/)/).reduce((o, _, i, p) => {
      o.children = o.children || [];
      var path = p.slice(0, i + 1).join('');
      var pathLast = path.match(/([^\/]*)\/*$/)[1] //list item of path splitted with '/'
      var temp = o.children.find(o => o.path === path);
      if (!temp) {
          o.children.push(temp = { path });
      }
      return temp;
    }, r);
    return r;
  }, { children: output });

  console.log(output);

给我这个：

[
  {
    "path":"Brussels",
    "children":[
      {
        "path":"Brussels/Brussels CBD",
        "children":[
          {
            "path":"Brussels/Brussels CBD/North"
          },
          {
            "path":"Brussels/Brussels CBD/Louise"
          },
          {
            "path":"Brussels/Brussels CBD/Léopold"
          },
          {
            "path":"Brussels/Brussels CBD/Centre"
          },
          {
            "path":"Brussels/Brussels CBD/Midi"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Decentralised",
        "children":
        [
          {
            "path":"Brussels/Brussels Decentralised/West"
          },
          {
            "path":"Brussels/Brussels Decentralised/Walloon Brabant"
          },
          {
            "path":"Brussels/Brussels Decentralised/South"
          },
          {
            "path":"Brussels/Brussels Decentralised/North East"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Periphery",
        "children":
        [
          {
            "path":"Brussels/Brussels Periphery/Airport"
          },
          {
            "path":"Brussels/Brussels Periphery/Ring"
          }
        ]
      }
    ]
  }
]

太好了！

但是输出只有路径属性，而我想保留其他的（实际上，这里只有另一个 name 属性，但我会有更多），所以我更想要这个：

[
  {
    "path":"Brussels",
    "children":[
      {
        "path":"Brussels/Brussels CBD",
        "children":[
          {
            "path":"Brussels/Brussels CBD/North",
            "name":"brussels_district_north"
          },
          {
            "path":"Brussels/Brussels CBD/Louise",
            "name":"brussels_district_louise"
          },
          {
            "path":"Brussels/Brussels CBD/Léopold",
            "name":"brussels_district_léopold"
          },
          {
            "path":"Brussels/Brussels CBD/Centre",
            "name":"brussels_district_centrum"
          },
          {
            "path":"Brussels/Brussels CBD/Midi",
            "name":"brussels_district_midi"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Decentralised",
        "children":
        [
          {
            "path":"Brussels/Brussels Decentralised/West",
            "name":"brussels_district_west"
          },
          {
            "path":"Brussels/Brussels Decentralised/Walloon Brabant",
            "name":"brussels_district_walloon-brabant"
          },
          {
            "path":"Brussels/Brussels Decentralised/South",
            "name":"brussels_district_south"
          },
          {
            "path":"Brussels/Brussels Decentralised/North East",
            "name":"brussels_district_ north_east"
          }
        ]
      },
      {
        "path":"Brussels/Brussels Periphery",
        "children":
        [
          {
            "path":"Brussels/Brussels Periphery/Airport",
            "name":"brussels_district_airport"
          },
          {
            "path":"Brussels/Brussels Periphery/Ring",
            "name":"brussels_district_ring"
          }
        ]
      }
    ]
  }
]

我如何编辑我的函数来实现这一点？

谢谢

Answer 1

您可以检查索引加一是否等于分割路径的长度并添加name。

const
    input = [{ name: "brussels_district_north", path: "Brussels/Brussels CBD/North" }, { name: "brussels_district_louise", path: "Brussels/Brussels CBD/Louise" }, { name: "brussels_district_west", path: "Brussels/Brussels Decentralised/West" }, { name: "brussels_district_léopold", path: "Brussels/Brussels CBD/Léopold" }, { name: "brussels_district_airport", path: "Brussels/Brussels Periphery/Airport" }, { name: "brussels_district_ring", path: "Brussels/Brussels Periphery/Ring" }, { name: "brussels_district_walloon-brabant", path: "Brussels/Brussels Decentralised/Walloon Brabant" }, { name: "brussels_district_centrum", path: "Brussels/Brussels CBD/Centre" }, { name: "brussels_district_midi", path: "Brussels/Brussels CBD/Midi" }, { name: "brussels_district_south", path: "Brussels/Brussels Decentralised/South" }, { name: "brussels_district_ north_east", path: "Brussels/Brussels Decentralised/North East" }],
    output = [];

input.reduce((r, item) => {
    item.path.split(/(?=\/)/).reduce((o, _, i, p) => {
        o.children = o.children || [];
        var path = p.slice(0, i + 1).join('');
        var temp = o.children.find(o => o.path === path);
        if (!temp) {
            o.children.push(temp = { path });
            if (i + 1 === p.length) temp.name = item.name;
        }
        return temp;
    }, r);
    return r;
}, { children: output });

console.log(output);

.as-console-wrapper { max-height: 100% !important; top: 0; }