Day382：使用 TypeScript 语法将没有层级的扁平数据转换成树形结构的数据?

[qappleh]

// 扁平数据
[{
  name: '文本1',
  parent: null,
  id: 1,
}, {
  name: '文本2',
  id: 2,
  parent: 1
}, {
  name: '文本3',
  parent: 2,
  id: 3,
}]

// 树状数据
[{
  name: '文本1',
  id: 1,
  children: [{
    name: '文本2',
    id: 2,
    children: [{
      name: '文本3',
      id: 3
    }]
  }]
}]

[guanxc9876]

getTree(data) {
  const backArr = JSON.parse(JSON.stringify(data)).reverse()
  let childArr = []
  let treeArr = []
  function recursion(arr1) {
    if (arr1.length === 1) {
      arr1[0].children = childArr
      treeArr = JSON.parse(JSON.stringify(arr1))
    } else {
      if (childArr.length) {
        arr1[0].children = childArr
        childArr = []
      }
      childArr.push(arr1.shift())
      recursion(arr1)
    }
  }
  recursion(backArr)
  return treeArr
},

[adaex]

interface ListItem {
  id: number
  name: string
  parent: number | null
}

interface TreeItem {
  id: number
  name: string
  children: TreeItem[]
}

function list2tree(list: ListItem[]): TreeItem[] {
  const temp = {} as { [id: number]: TreeItem }
  const tree = [] as TreeItem[]

  // 临时储存
  list.forEach(({ id, name }) => {
    temp[id] = { id, name, children: [] }
  })

  // 遍历处理
  list.forEach(({ id, parent }) => {
    if (parent === null) {
      tree.push(temp[id])
    } else if (temp[parent]) {
      temp[parent].children.push(temp[id])
    }
  })
  return tree
}

[adaex]

测试

const list = [
  {
    name: '文本1',
    parent: null,
    id: 1,
  },
  {
    name: '文本2',
    id: 2,
    parent: 1,
  },
  {
    name: '文本3',
    parent: 2,
    id: 3,
  },
]

const tree = list2tree(list)
console.log(JSON.stringify(tree, undefined, 2))

输出

[
  {
    "id": 1,
    "name": "文本1",
    "children": [
      {
        "id": 2,
        "name": "文本2",
        "children": [
          {
            "id": 3,
            "name": "文本3",
            "children": []
          }
        ]
      }
    ]
  }
]