对树形结构的一些递归处理方法 tree

对树形结构的一些递归处理方法 tree对树形结构的一些递归处理方法 tree

原树形结构：

data1: [
        {
          title: "parent 1",
          expand: true,
          id:1,
          isParent:true,
          children: [
            {
              title: "parent 1-1",
              expand: true,
              isParent:true,
              id:2,
              children: [
                {
                  title: "leaf 1-1-1",
                  id:3,
                  isParent:false,
                },
                {
                  title: "leaf 1-1-2",
                  id:4,
                  isParent:false,
                },
              ],
            },
            {
              title: "parent 1-2",
              expand: true,
              isParent:true,
              id:5,
              children: [
                {
                  title: "leaf 1-2-1",
                  id:6,
                  isParent:false,
                },
                {
                  title: "leaf 1-2-1",
                  id:7,
                  isParent:false,
                },
              ],
            },
          ],
        },
      ],

1、树状图根据id取id及以后的树状图

getChidlren(id,data) { //输入id与要查的树状数组
      var hasFound = false, // 表示是否有找到id值
        result = null;
      var fn = function (data) {
        if (Array.isArray(data) && !hasFound) { // 判断是否是数组并且没有的情况下，
          data.forEach(item => {
            if (item.id == id) { // 数据循环每个子项，并且判断子项下边是否有id值
              result = item; // 返回的结果等于每一项
              hasFound = true; // 并且找到id值
            } else if (item.children) {
              fn(item.children); // 递归调用下边的子项
            }
          })
        }
      }
      fn(data); // 调用一下
      return result;//树状图根据id取id及以后的树状图
    },

 //调用
console.log(this.getChidlren(2,this.data1))

所得数据：

{
    "title": "parent 1-1",
    "expand": true,
    "isParent": true,
    "id": 2,
    "children": [
        {
            "title": "leaf 1-1-1",
            "id": 3,
            "isParent": false,
            "nodeKey": 2
        },
        {
            "title": "leaf 1-1-2",
            "id": 4,
            "isParent": false,
            "nodeKey": 3
        }
    ],
    "nodeKey": 1
}

2、根据树状图取自己包括自己子集的id值，接第一种，输入第一种的所得数据格式

getId(obj) { //输入要树形结构，带上isParent
        var idsList = [];
        fn(obj);
        function fn(obj) {
          if (Array.isArray(obj)) {
            obj.forEach(i=>{
              if (i.id) {
              idsList.push(i.id);
              }
            })
          }else{
            idsList.push(obj.id);
          }
          if (obj.isParent) {
            fn(obj.children);
          }else if(Array.isArray(obj)){
              obj.forEach(e=>{
                  if (e.isParent) {
                    fn(e.children);
                }
              })
          }
        }
        return idsList;
      },
       //调用
console.log(this.getId(5))

所得数据：

[5, 6, 7]

以上两种结合一起用，则可以查找根据id获取其id以及其子的所有id数组
用到可以用于树搜索功能

3、递归获得树状数据id方法

getParentsIds(data, id) {       // 根据value值匹配
      for (const i in data) {
          if (data[i].value === id) {
            return [data[i].value]
          }
          if (data[i].children) {
            const result = this.getParentsIds(data[i].children, id)
            if (result !== undefined) {
              return result.concat(data[i].value)
            }
          }
      }
    },//根据子id 递归获取到父id数组
      //调用
console.log(this.getParentsIds(this.data1,3));

所得数据：

[3, 2, 1]

4、树状图修改某一属性

getTreeData(data) { // 第二种 修改涉及级联选择器 最后一个空白的情况
            // 循环遍历json数据
            for (var i = 0; i < data.length; i++) {
              if(data[i].expand){
                data[i].expand=false
              }
              if (!data[i].children) {
                // children若为空数组，则不作操作
              } else {
                // children若不为空数组，则继续 递归调用 本方法
                this.getTreeData(data[i].children);
              }
            }
            return data;
          },
            //调用 使其expend属性都为false
console.log(this.getTreeData(this.data1));

所得数据：

[
    {
        "title": "parent 1",
        "expand": false,
        "id": 1,
        "isParent": true,
        "children": [
            {
                "title": "parent 1-1",
                "expand": false,
                "isParent": true,
                "id": 2,
                "children": [
                    {
                        "title": "leaf 1-1-1",
                        "id": 3,
                        "isParent": false,
                        "nodeKey": 2
                    },
                    {
                        "title": "leaf 1-1-2",
                        "id": 4,
                        "isParent": false,
                        "nodeKey": 3
                    }
                ],
                "nodeKey": 1
            },
            {
                "title": "parent 1-2",
                "expand": false,
                "isParent": true,
                "id": 5,
                "children": [
                    {
                        "title": "leaf 1-2-1",
                        "id": 6,
                        "isParent": false,
                        "nodeKey": 5
                    },
                    {
                        "title": "leaf 1-2-1",
                        "id": 7,
                        "isParent": false,
                        "nodeKey": 6
                    }
                ],
                "nodeKey": 4
            }
        ],
        "nodeKey": 0
    }
]

4、递归将列表转换成树形结构

// 递归将列表转换成树形结构
        function listToTreeData(list, rootValue) { //rootValue为根节点值
            var arr = []
            list.forEach(item => {
                if (item.pid === rootValue) {
                    const children = listToTreeData(list, item.id)
                    if (children.length) {
                        item.child = children
                    }
                    arr.push(item)
                }
            })
            return arr
        }
        let treeData = listToTreeData(dataList, '') // 调用方法

5、递归将树形结构转换成列表

function treeDataToList(arr) {
            return [].concat(...arr.map(item => {
                if (item.child) {
                    let arr = [].concat(item, ...treeDataToList(item.child));
                    delete item.child;
                    return arr;
                }
                return [].concat(item);
            }));
        }
        console.log('flatten', flatten(list))