javascript - 扁平化数组转换成树形?

Question

背景：

需要将扁平化数组转换成树形数组。

比如原始数组如下：

const arr = [    {id: 4, pid: 3},    {id: 'aa',pid:'a'},  {id: 1, pid: null},    {id: 3, pid: 2},  {id: 'a',pid: 'a0'},  {id: 2, pid: 1},  {id: 'a0',pid: null}  ];  

期望转换后的数据

[    {        "id": 1,        "pid": null,        "children": [            {                "id": 2,                "pid": 1,                "children": [                    {                        "id": 3,                        "pid": 2,                        "children": [                            {                                "id": 4,                                "pid": 3                            }                        ]                    }                ]            }        ]    },    {        "id": "a0",        "pid": null,        "children": [            {                "id": "a",                "pid": "a0",                "children": [                    {                        "id": "aa",                        "pid": "a"                    }                ]            }        ]    }]

Answer 1

js 代码

arr.reduce((o, i) => {    i = Object.assign(o[i.id] ??= {}, i);    ((o[i.pid ?? ''] ??= {}).children ??= []).push(i);    return o;}, {})['']?.children

结果

[  {    "id": 1,    "pid": null,    "children": [      {        "id": 2,        "pid": 1,        "children": [          {            "id": 3,            "pid": 2,            "children": [              {                "id": 4,                "pid": 3              }            ]          }        ]      }    ]  },  {    "id": "a0",    "pid": null,    "children": [      {        "id": "a",        "pid": "a0",        "children": [          {            "id": "aa",            "pid": "a"          }        ]      }    ]  }]

Answer 2

type ID = string | number | nulltype Item = { id: ID; pid: ID; children?: Item[] }const mp = new Map<ID, Item>([[null, { id: null, pid: null, children: [] }]])const set = new Set<Item>(arr)while (set.size)    set.forEach(i => {        const p = mp.get(i.pid)        if (p) {            p.children ??= []            p.children.push(i)            mp.set(i.id, i)            set.delete(i)        }    })const transformed = mp.get(null)?.children!

Answer 3

const toTree = (items) => {    const map = Object.fromEntries(items.map(item => [item.id, item]))    const roots = []    items.forEach(item => {        const { pid } = item        if (pid === null) {            roots.push(item)            return        }        const parent = map[pid]        if (! parent) throw `No item with id "${pid}"`        ; (parent.children ??= []).push(item)    })    return roots}

Answer 4

export const normalTree = data => {  const map = {}  const tree = []  const reduce = (list, item) => {    const { id, pid, ...child } = item    child.id = id    if (!pid) list.push(child)    map[id] = child    return list  }  data.reduce(reduce, tree)  const each = item => {    const { id, pid } = item || {}    const child = map[pid]    if (child) {      const { children } = child      children        ? map[pid].children.push(map[id])        : (map[pid].children = [map[id]])    }  }  data.forEach(each)  return tree}

Answer 5

要将扁平化数组转换成树形数组，你可以使用递归的方法来构建树结构。以下是一个可能的实现：

function buildTree(arr, parentId = null) {  const result = [];  const temp = arr.filter(item => item.pid === parentId);  temp.forEach(item => {    const children = buildTree(arr, item.id);    if (children.length) {      item.children = children;    }    result.push(item);  });  return result;}const arr = [  {id: 4, pid: 3},  {id: 'aa', pid: 'a'},  {id: 1, pid: null},  {id: 3, pid: 2},  {id: 'a', pid: 'a0'},  {id: 2, pid: 1},  {id: 'a0', pid: null}];const tree = buildTree(arr);console.log(JSON.stringify(tree, null, 2));

这段代码首先定义了一个buildTree函数，它接受一个数组和一个可选的parentId参数。parentId默认为null，表示从根节点开始构建树。函数内部首先通过filter方法筛选出所有pid等于parentId的节点，然后对这些节点进行遍历。对于每个节点，递归调用buildTree函数来构建其子树，并将结果赋值给item.children。最后，将当前节点添加到结果数组中。最终，返回结果数组作为树的根节点。

在主程序中，我们调用buildTree函数来构建树，并使用console.log将结果输出到控制台。注意，为了更清晰地展示结果，我使用了JSON.stringify函数将结果转换为格式化的JSON字符串。

运行以上代码，你将得到期望的转换后的树形数组。