扁平化数据与树结构的相互转化

代码如下（示例）：

const data = [
  { id: 13, name: '绵阳', parentId: 1 },
  { id: 1, name: '四川' },
  { id: 12, name: '南充', parentId: 1 },
  { id: 2, name: '北京' },
  { id: 11, name: '成都', parentId: 1 },
  { id: 3, name: '上海' },
  { id: 4, name: '天津' },
  { id: 5, name: '重庆' },
  { id: 6, name: '河南' },
  { id: 111, name: '都江堰', parentId: 11 },
  { id: 112, name: '青阳区', parentId: 11 },
  { id: 21, name: '北京市', parentId: 2 },
  { id: 22, name: '朝阳区', parentId: 2 },
  { id: 23, name: '海定区', parentId: 2 },
  { id: 31, name: '上海市', parentId: 3 },
  { id: 41, name: '天津市', parentId: 4 },
  { id: 51, name: '重庆市', parentId: 5 },
  { id: 52, name: '沙坪坝', parentId: 5 },
]

将数据data转为树形结构

代码如下（示例）：

 const result = data.reduce((pre, cur, i, arr) => {
      cur.children = arr.filter((v) => v.parentId === cur.id)
      if (!cur.parentId) {
        pre.push(cur)
      }
      return pre
    }, [])
   // console.log(result)--->
   [
      {
        id: 1,
        name: '四川',
        children: [
          {
            id: 13,
            name: '绵阳',
            parentId: 1,
            children: [],
          },
          {
            id: 12,
            name: '南充',
            parentId: 1,
            children: [],
          },
          {
            id: 11,
            name: '成都',
            parentId: 1,
            children: [
              {
                id: 111,
                name: '都江堰',
                parentId: 11,
                children: [],
              },
              {
                id: 112,
                name: '青阳区',
                parentId: 11,
                children: [],
              },
            ],
          },
        ],
      },
      {
        id: 2,
        name: '北京',
        children: [
          {
            id: 21,
            name: '北京市',
            parentId: 2,
            children: [],
          },
          {
            id: 22,
            name: '朝阳区',
            parentId: 2,
            children: [],
          },
          {
            id: 23,
            name: '海定区',
            parentId: 2,
            children: [],
          },
        ],
      },
      {
        id: 3,
        name: '上海',
        children: [
          {
            id: 31,
            name: '上海市',
            parentId: 3,
            children: [],
          },
        ],
      },
      {
        id: 4,
        name: '天津',
        children: [
          {
            id: 41,
            name: '天津市',
            parentId: 4,
            children: [],
          },
        ],
      },
      {
        id: 5,
        name: '重庆',
        children: [
          {
            id: 51,
            name: '重庆市',
            parentId: 5,
            children: [],
          },
          {
            id: 52,
            name: '沙坪坝',
            parentId: 5,
            children: [],
          },
        ],
      },
      {
        id: 6,
        name: '河南',
        children: [],
      },
    ]

将树结构 扁平化

const data = [
  {
    id: 1,
    name: '四川',
    children: [
      {
        id: 13,
        name: '绵阳',
        parentId: 1,
        children: [],
      },
      {
        id: 12,
        name: '南充',
        parentId: 1,
        children: [],
      },
      {
        id: 11,
        name: '成都',
        parentId: 1,
        children: [
          {
            id: 111,
            name: '都江堰',
            parentId: 11,
            children: [],
          },
          {
            id: 112,
            name: '青阳区',
            parentId: 11,
            children: [],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: '北京',
    children: [
      {
        id: 21,
        name: '北京市',
        parentId: 2,
        children: [],
      },
      {
        id: 22,
        name: '朝阳区',
        parentId: 2,
        children: [],
      },
      {
        id: 23,
        name: '海定区',
        parentId: 2,
        children: [],
      },
    ],
  },
  {
    id: 3,
    name: '上海',
    children: [
      {
        id: 31,
        name: '上海市',
        parentId: 3,
        children: [],
      },
    ],
  },
  {
    id: 4,
    name: '天津',
    children: [
      {
        id: 41,
        name: '天津市',
        parentId: 4,
        children: [],
      },
    ],
  },
  {
    id: 5,
    name: '重庆',
    children: [
      {
        id: 51,
        name: '重庆市',
        parentId: 5,
        children: [],
      },
      {
        id: 52,
        name: '沙坪坝',
        parentId: 5,
        children: [],
      },
    ],
  },
  {
    id: 6,
    name: '河南',
    children: [],
  },
]

实现方式如下

方法一
// 非严格模式下
 const result = data.reduce(function (pre: any, cur) {
      pre.push({
        id: cur?.id,
        name: cur?.name,
        parentId: cur?.parentId,
      })
      cur?.children?.forEach((i) => {
        i.parentId = cur.id
        arguments.callee(pre, i) //注：严格模式下不允许使用arguments.callee
      })
      return pre
    }, [])
    console.log(result)
// 方法二
 const result = data.reduce(function fn(pre: any, cur) {
      pre.push({
        id: cur?.id,
        name: cur?.name,
        parentId: cur?.parentId,
      })
      cur?.children?.forEach((i) => {
        i.parentId = cur.id
        fn(pre, i)
      })
      return pre
    }, [])
    console.log(result)
// 方法三
	const res = []
    formatArr(data)
    function formatArr(deepArr, pid) {
      deepArr.forEach((node) => {
        const resobj = {
          id: node.id,
          name: node.name,
          parentId: pid,
        }
        res.push(resobj)
        if (node?.children?.length) {
          formatArr(node.children, node.id)
        }
      })
    }
    console.log(res)
// 方法四
  const result = formatArr(data)
    function formatArr(deepArr, pid) {
      const res = []
      deepArr.forEach((node) => {
        const resobj = {
          id: node.id,
          name: node.name,
          parentId: pid,
        }
        res.push(resobj)
        if (node?.children?.length) {
          res.push(...formatArr(node.children, node.id))
        }
      })
      return res
    }
    console.log(result)

---