树状结构数据数据处理方法大概整理

​ 最近在做公司项目的时候，遇到了大量的关于树形结构数据的数据交互处理，因此做一下简单的日常整理吧，算是记录，方便日后查阅！

下述方法可以在做一些关于树状结构数据，通过父子关联关系来进行一些页面交互操作时的数据处理！
有需要优化的也可讨论交流

没有孤鹜，但有落霞

通过code查询当前节点在树形结构数据中所有的父级以及自身

 let arr = [
    {
      code: 1,
      name: 2,
      parentId: "-1",
      children: [
        { code: 3, name: 33, parentId: 1 },
        { code: 5, name: 3233, parentId: 1 },
      ],
    },
    {
      code: 53,
      name: 666,
      parentId: "-1",
      children: [
        { code: 222, name: "ew33", parentId: 53 },
        { code: 564, name: "PPP", parentId: 53 },
      ],
    },
  ]
   /**
   * @description 通过code查询当前节点在树形结构数据中所有的父级以及自身，
   * @param {*} array 查询数据源
   * @param {*} key  查询数据节点code
   * @return result
   * */
  function getParent(array, key) {
    let result = []
    for (let i = 0; i < array.length; i++) {
      const e = array[i]
      if (e.code === key) {
        // 若查询到对应的节点，则直接返回
        result.push(e)
        break
      } else if (e.children && e.children.length !== 0) {
        // 判断是否还有子节点，若有对子节点进行循环调用
        const child = this.getParent(e.children, key)
        // 若child的长度不为0，则说明子节点在该节点的children内，记录此节点，并终止循环
        if (child.length !== 0) {
          child.unshift(e)
          result = child
          break
        }
      }
    }
    return result
  }
  let newStr = getParent(arr, 222)
  console.log(newStr)
  /**
   * 0:{code: 53, name: 666, parentId: '-1', children: Array(2)}
   * 1:{code: 222, name: 'ew33', parentId: 53}
  */

一维数组转树状结构数据

/**
   * @description 一维数据转为树状结构数组
   * @param {*} data 平铺数据源
   * @return tree
  */
 function arrTree(data) {
    // 当前父子关联关系为子级的parentId等于父级的code
      const result = []
      const map = {}
      data.forEach(item => (map[item.code] = item))
      data.forEach(item => {
        const father = map[item.parentId]
        if (father) {
          father.children.push(item)
        } else {
          result.push(item)
        }
      })
      return result
    } 

树状结构数据父子关联关系字段重新赋值

/**
   *  @description 树状结构数据父子关联关系字段重新赋值 
   *  @param{*} tree
   */ 
  function treeParentChild(tree) {
    for (const key of tree) {
      key.customCode = key.code
      if (key.parentId == "-1") {
        key.customParentId = key.parentId
      }
      if (key.children && key.children.length > 0) {
        dn(key.children, key.code)
      } else {
        key.children = []
      }
    }
    function dn(tree, code) {
      tree.map((item) => {
        item.customCode = item.code
        item.customParentId = code
        if (item.children && item.children.length > 0) {
          dn(item.children, item.code)
        } else {
          item.children = []
        }
      })
    }
    return tree
  }

树状结构数据数据平铺

/**
     *  @description 树状结构数据数据平铺
     *  @param {*} tree
     *  @return list
      */
     function toArr(arr) {
      const result = []
      let node = []
      node = node.concat(arr)
      while (node.length) {
        const first = node.shift() // 每一次都取node的第一项出来
        if (first.children) {
          // 如果第一项有children属性，那么就把这个children放到node的最后一项取
          node = node.concat(first.children) 
          // 删除children属性 
          delete first.children  
        }
        result.push(first)
      }
      return result
    } 

判断当前父级是否存在子级数据，如果没有删除该项父级

    /**
     * 保存时判断当前项父级是否存在子集进行删除
     */
   delateParent(tree, code, parentId) {
      function dn(data, code, parent) {
        data.forEach((item, index) => {
          if (item.code == code) {
            data.splice(index, 1)
            if (!data.length) {
              dn(tree, parentId, '')
            }
          }
          if (item.children && item.children.length > 0) {
            dn(item.children, code)
          }
        })
      }
      dn(tree, code, parentId)
      return tree
    },

树状结构数据层级数数据处理

  layerCallBack() {
      this.treeData.map(item => {
        item.layer = 0
        item.layer += 1
        if (item.children && item.children.length > 0) {
          this.nodeTreeLayer(item.children, item.layer)
        }
      })
    },
  nodeTreeLayer(tree, layer) {
      for (const key of tree) {
        key.layer = 1
        key.layer += layer
        if (key.children && key.children.length > 0) {
          this.nodeTreeLayer(key.children, key.layer)
        }
      }
    }