如何改进将平面数组转换为树的功能? [英] how to improve this function that converts a flat array into a tree?

问题描述

我具有基于 path 属性将平面数组转换为树的功能.

I have this function that converts a flat array to a tree based on a path property.

这是我的数据:

  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"
          }
        ]
      }
    ]
  }
]

太好了！

但是输出只具有path属性，而我想保留其他属性(实际上，这里只有另一个 name 属性，但是我会有更多)，所以我宁愿这样:

But the output only has the path attribute, while I would like to keep the other ones (actually, there is only another name attribute here but I will have more), so I rather want this :

[
  {
    "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"
          }
        ]
      }
    ]
  }
]

我该如何编辑我的功能来实现这一目标?

How could I edit my function to achieve this ?

谢谢

推荐答案

您可以检查索引加一是否等于分割路径的长度，然后添加 name .

You could check if the index plus one is equal to the length of the splitted path and add 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; }

这篇关于如何改进将平面数组转换为树的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！