js 处理树形结构数据

js 处理树形结构数据

数据

 let data = [
        { id: 1, address: '安徽', parent_id: 0 },
        { id: 2, address: '江苏', parent_id: 0 },
        { id: 3, address: '合肥', parent_id: 1 },
        { id: 4, address: '庐阳区', parent_id: 3 },
        { id: 5, address: '大杨镇', parent_id: 4 },
        { id: 6, address: '南京', parent_id: 2 },
        { id: 7, address: '玄武区', parent_id: 6 },
        { id: 8, address: '梅园新村街道', parent_id: 7 },
        { id: 9, address: '上海', parent_id: 0 },
        { id: 10, address: '黄浦区', parent_id: 9 },
        { id: 11, address: '外滩', parent_id: 10 },
        { id: 12, address: '安庆', parent_id: 1 },
      ]

第一种

handleTree(data, pid) {
      function tree(id) {
        let arr = []
        data
          .filter((item) => {
            return item.parent_id === id
          })
          .forEach((item) => {
            arr.push({
              area_id: item.id,
              label: item.address,
              children: tree(item.id),
            })
          })
        return arr
      }
      return tree(pid)
    }

console.log(handleTree(data, 0))

第二种

handleTree(data) {
      // 删除 所有 children,以防止多次调用
      data.forEach(function(item) {
        delete item.children
      })
      // 将数据存储为 以 id 为 KEY 的 map 索引数据列
      var map = {}
      data.forEach(function(item) {
        map[item.id] = item
      })
      //        console.log(map);
      var val = []
      data.forEach(function(item) {
        // 以当前遍历项，的parent_id,去map对象中找到索引的id
        var parent = map[item.parent_id]
        // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
        if (parent) {
          ;(parent.children || (parent.children = [])).push(item)
        } else {
          //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
          val.push(item)
        }
      })
      return val
    },
   
 console.log(handleTree(data, 0))

第三种

handleTree(arr) {
      let cloneData = JSON.parse(JSON.stringify(arr)) // 对源数据深度克隆
      return cloneData.filter((father) => {
        let branchArr = cloneData.filter(
          (child) => father.id == child.parent_id
        ) //返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : '' //如果存在子级，则给父级添加一个children属性，并赋值
        return father.parent_id == 0 //返回第一层
      })
    },
    
 console.log(handleTree(data, 0))