树形数据与一维数组之间相互转换

1. 一维数组转化成Tree形数据

1-1 准备一个一维数组

    let list = [
      {
        pid: 0,
        id: 1,
        name: '总公司'
      },
      {
        pid: 1,
        id: 11,
        name: '北京公司'
      },
      {
        pid: 1,
        id: 12,
        name: '上海公司'
      },
      {
        pid: 1,
        id: 13,
        name: '郑州公司'
      },
      {
        pid: 11,
        id: 111,
        name: '北京子公司1'
      },
      {
        pid: 11,
        id: 112,
        name: '北京子公司2'
      },
      {
        pid: 12,
        id: 121,
        name: '上海子公司1'
      },
      {
        pid: 12,
        id: 122,
        name: '上海子公司2'
      },
      {
        pid: 121,
        id: 1211,
        name: '上海子公司1的子公司1'
      },
      {
        id: 2,
        name: '南京总公司'
      },
    ]

1-2 封装一个将一维数组转化成Tree形数据的函数

 	/**
     * 将数据转化成 --> 树形节点
     * 参数: data 需要转化的一维数组数据; rootValue 根节点的pid值
    */
    const flatdataToTreedata = (data, rootValue) => {
      const arr = []
      data.forEach(item => {
      	if (!item.pid) {
			arr.push(item);
		} else if (item.pid == rootValue) {
          arr.push(item)
          const children = flatdataToTreedata(data, item.id)
          children.length && (item.children = children)
        }
      })
      return arr
    }

1-3 函数调用, 输出转化后的 tree 形数据

 let listData = flatdataToTreedata(list, 0)
 console.log('转化后的树形数组', listData)

2. Tree形数据转换成一维数组(tree形数据的扁平化)

2-1 准备Tree形数据

let treeData = [
  {
      id: 1,
      pid: 0,
      name: '河南省',
      children: [
        {
          id: 11,
          pid: 1,
          name: '郑州市',
        },
        {
          id: 12,
          pid: 1,
          name: '洛阳市',
        },
        {
          id: 13,
          pid: 1,
          name: '南阳市',
          children: [
            {
              id: 131,
              pid: 13,
              name: '方城县',
              children: [
                {
                  id: 1311,
                  pid: 131,
                  name: '博望镇',
                  children: [
                    {
                      id: 13111,
                      pid: 1311,
                      name: '秦王庙村',
                    },
                    {
                      id: 13112,
                      pid: 1311,
                      name: '白河村',
                    },
                    {
                      id: 13112,
                      pid: 1311,
                      name: '赵岗村',
                    }
                  ]
                },
                {
                  id: 1312,
                  pid: 131,
                  name: '赵河镇'
                },
                {
                  id: 1313,
                  pid: 131,
                  name: '广阳镇'
                },
                {
                  id: 1314,
                  pid: 131,
                  name: '清河镇'
                },
              ]
            },
            {
              id: 132,
              pid: 13,
              name: '南召县',
            },
            {
              id: 131,
              pid: 13,
              name: '社旗县',
            },
            {
              id: 131,
              pid: 13,
              name: '镇平县',
            }
          ]
        },
        {
          id: 14,
          pid: 1,
          name: '安阳市',
        },
      ]
    },
    {
      id: 2,
      pid: 0,
      name: '河北省',
      children: [
        {
          id: 21,
          pid: 2,
          name: '廊坊市',
        },
        {
          id: 22,
          pid: 2,
          name: '天津市',
        },
        {
          id: 23,
          pid: 2,
          name: '邢台市',
        },
      ]
    }
  ]

2-2 封装一个将Tree形数据转化成一维数组的函数

  // 树形数据扁平化
  function treeToFlat (data) {
    let ary = []
    data.forEach(item => {
      if (item.children) {
        ary.push(item)
        if (item.children.length > 0) {
          ary.push(...treeToFlat(item.children))
        }
      } else {
        ary.push(item)
      }
      delete (item.children)
    })
    return ary
  }

2-3 函数调用, 输出转化后的一维数组

   let flatDtata = treeToFlat(treeData)
   console.log('一维数组数据', flatDtata)

3. 对互转函数的正确性进行验证

  // 将转化后的一维数组再转化成Tree形数据, 并与Tree形数据treeData进行对
  console.log('验证一维数组与Tree形数据之间的互转', flatdataToTreedata(flatDtata, 0))