数组与树 ​

interface Tree {
  name: number
  children?: Tree[]
}

const trees: Tree[] = [
  {
    name: 1,
    children: [
      {
        name: 2,
        children: [
          {
            name: 3,
          },
        ],
      },
    ],
  },
]

const result = [
  {
    name: 1,
  },
  {
    name: 2,
  },
  {
    name: 3,
  },
]

/**
 * 拍平
 * @param tree
 */
export function flatten(trees: Tree[]) {
  let ans = []
  trees.forEach((tree) => {
    ans.push({
      name: tree.name,
    })
    if (Array.isArray(tree.children) && tree.children.length)
      ans = ans.concat(flatten(tree.children))
  })
  return ans
}

const ans = flatten(trees)
console.log(ans)

if (JSON.stringify(ans) === JSON.stringify(result))
  console.log(true)

// true

interface TreeNode {
  id: number
  /**
   * 父亲节点
   */
  pid?: number
  name: string
}

const source: TreeNode[] = [
  {
    id: 1,
    name: 'body',
  },
  {
    id: 2,
    pid: 1,
    name: 'title',
  },
  {
    id: 3,
    pid: 1,
    name: 'div',
  },
  {
    id: 4,
    pid: 3,
    name: 'span',
  },
  {
    id: 5,
    pid: 3,
    name: 'icon',
  },
  {
    id: 6,
    pid: 4,
    name: 'subspan',
  },
]

/**
 * 构建树
 * @param data
 */
export function toTree(data: TreeNode[]) {
  const result = []
  if (!Array.isArray(data))
    return

  // 构建节点索引
  const map = {}
  data.forEach((item) => {
    map[item.id] = item
  })

  data.forEach((item) => {
    const parent = map[item.pid]
    if (parent) {
      if (parent.children)
        parent.children.push(item)
      else
        parent.children = [item]
    }
    else {
      result.push(item)
    }
  })

  return result
}

const ans = toTree(source)
console.log(JSON.stringify(ans, null, 2))