数组转树形结构,大佬帮帮忙..

Question

const testArray = [
    { Zone1: "广州", Zone2: "番禺2", Zone3: "路牌号3" },
    { Zone1: "广州", Zone2: "番禺2", Zone3: "路牌号4" },
    { Zone1: "广州", Zone2: "天河2", Zone3: "路牌号3" },
    { Zone1: "广州", Zone2: "越秀2", Zone3: "路牌号3" },
    { Zone1: "广州", Zone2: "荔湾2", Zone3: "路牌号3" },
    { Zone1: "深圳", Zone2: "番禺2", Zone3: "路牌号5" },
    { Zone1: "香港", Zone2: "黄大仙2", Zone3: "黄大仙号3" },
    { Zone1: "马来西亚", Zone2: "马来西亚2", Zone3: "马来西亚3" }
]

转为以下树形结构,各位大佬帮帮忙....

options: [
  {
    value: "gz",
    label: "广州",
    children: [
      {
        value: "***",
        label: "番禺2",
        children: [
          { value: "***", label: "路牌号3" },
          { value: "***", label: "路牌号4" }
        ]
      },
      {
        value: "***",
        label: "天河2",
        children: [{ value: "***", label: "路牌号3" }]
      }
    ]
  },
  {
    value: "sz",
    label: "深圳",
    children: [
      {
        value: "***",
        label: "番禺2",
        children: [{ value: "***", label: "路牌号5" }]
      }
    ]
  }
]

Answer 1

本来说建议阅读：从列表生成树，但是文章里好像不是处理的这种结构的列表。下面是对这个问题的答案

function makeTree(data, keys) {
    return data.reduce((acc, it) => {
        let parent = { children: acc };
        keys.map(key => it[key])
            .forEach(value => {
                const children = (parent.children ??= []);
                parent = children.find(({ label }) => value === label) ?? children[children.push({ label: value }) - 1];
            });
        return acc;
    }, []);
}

const keys = Array.from(Array(3), (_, i) => `Zone${i + 1}`);
const result = makeTree(testArray, keys);

console.dir(result, { depth: null });

思路和 @ForkKILLET 的差不多。里面那个循环本身也是一个递进的过程，也可以写成 reduce 的

function makeTree(data, keys) {
    return data.reduce((acc, it) => {
        keys.reduce(
            (parent, key) => {
                const label = it[key];
                const children = (parent.children ??= []);
                return children.find(({ label: expectLabel }) => label === expectLabel)
                    ?? children[children.push({ label: label }) - 1];
            },
            { children: acc }
        );
        return acc;
    }, []);
}

Answer 2

const conv = (arr, keys) => {
    const map = keys.map(() => ({}))
    return arr.reduce((acc, cur) => {
        keys.reduce(({ children }, key, layer) => {
            let item = children[map[layer][cur[key]]]
            if (! item) {
                item = { children: [], label: cur[key] }
                children.push(item)
                map[layer][cur[key]] = children.length - 1
            }
            return item
        }, acc)
        return acc
    }, { children: [] })
}

conv(testArray, [ "Zone1", "Zone2", "Zone3" ])

---

原答案

const conv = (arr, keys) => arr.reduce((acc, cur) => {
    keys.reduce((now, key) =>
        (now[cur[key]] ??= {}),
        acc
    )
    return acc
}, {})

conv(testArray, [ "Zone1", "Zone2", "Zone3" ])

也没说是什么树形结构，就整了个最简单的