js通过递归实现树形数据操作

SwJieJie

2024-04-14 帮助1人

一、处理复杂数据结构转成树形数据操作

案列一如下：
需求分析
1，根据fatherTreeCode判断是不是父级，为空是父级，然后处理成树形层级关系。
2，完成树形结构后再树形数据里面添加对应的key和value值进行显示。
原数据

  const treeData = [
    {
      capList: [],
      fatherTreeCode: "",
      isLeaf: "0",
      showSeqno: "1",
      treeCode: "TRE0rv",
      treeLevel: "1",
      treeName: "根目录",
    },
    {
      capList: [],
      fatherTreeCode: "TRE0rv",
      isLeaf: "0",
      showSeqno: "4",
      treeCode: "TRE0sw",
      treeLevel: "2",
      treeName: "物联网",
    },
    {
      fatherTreeCode: "TRE0rv",
      isLeaf: "1",
      showSeqno: "4",
      treeCode: "TRE0xw",
      treeLevel: "2",
      treeName: "云网业务",
      capList: [
        {
          code: "del-vpn",
          id: "8c15d2488ad24d55946e6ce0f5ea3f40",
          name: "5G切片开通",
          treeLevel: "12",

        },
        {
          code: "netpe-resource-allocation-request",
          id: "35202810e96442fda4d6aaa61122986b",
          name: "5G资源预占",
          treeLevel: "13",

        },
      ],
    },
  ];

代码如下：

 function tree (data) {
    const obj = {}
    for (const item of data) {
      obj[item.treeCode] = item
    }
    const result = []
    for (const item of data) {
      if (obj[item.fatherTreeCode]) {
        if (!obj[item.fatherTreeCode].capList) {
          obj[item.fatherTreeCode].capList = []
        }
        obj[item.fatherTreeCode].capList.push(item)
      } else {
        result.push(item)
      }
    }
    return result
  }
  let list = tree(treeData);
  console.log(list, 'list');
  function fn (data, index = '0-') {
    return data.map((item, indexItem) => {
      return {
        value: `${index}${indexItem}`,
        key: item.treeLevel,
        treeName: item.treeName || item.name,
        children: (() => {
          if (item.capList && item.capList.length > 0) {
            return fn(item.capList, `${index}${indexItem}-`);
          } else {
            return []
          }
        })()
      }
    })
  }
  console.log(fn(list));

处理后的数据
学新通
案列二如下：
需求分析：
据id和parentId把json数据结构转成树形状的数据结构
原数据

  const temp = [
      {
        'id': 1,
        'name': '1级1',
        'parentId': 0
      },
      {
        'id': 2,
        'name': '2级1',
        'parentId': 0
      },
      {
        'id': 4,
        'name': '1级1-1',
        'parentId': 1
      },
      {
        'id': 6,
        'name': '1级1-1-1',
        'parentId': 4
      },
      {
        'id': 12,
        'name': '2级1-1',
        'parentId': 2
      },
      {
        'id': 13,
        'name': '3级1',
        'parentId': 0
      },
      {
        'id': 14,
        'name': '3级1-1',
        'parentId': 13
      },
      {
        'id': 15,
        'name': '1级1-1-1-1',
        'parentId': 6
      }
  ]

代码如下：
方法一：

const transData = (jsonArr, idStr, pidStr, childrenStr) => {
      // 存放的最终结果树数组
      const result = [];
      const id = idStr;
      const parentId = pidStr;
      const children = childrenStr;
      const len = jsonArr.length;

      // 遍历得到以id为键名的对象(建立整棵树的索引)
      const hash = {};
      jsonArr.forEach(item => {
           hash[item[id]] = item;
      });

      for (let j = 0; j < len; j  ) {
          const jsonArrItem = jsonArr[j];
          const hashItem = hash[jsonArrItem[parentId]];
          if (hashItem) {
              // 如果当前项还没有children属性，则添加该属性并设置为空数组
              !hashItem[children] && (hashItem[children] = []);
              hashItem[children].push(jsonArrItem);
          } else {
              result.push(jsonArrItem);
          }
      }
      return result;
  };

  const jsonDataTree = transData(temp, 'id', 'parentId', 'children');
  console.log(jsonDataTree)

方法二：

	// 调用方法， temp为原始数据, result为树形结构数据
	var result = generateOptions(temp)

	// 开始递归方法
	generateOptions(params) {
      var result = []
      for (const param of params) {
        if (param.parentId === 0) {  // 判断是否为顶层节点
          var parent = {
            'id': param.id,
            'label': param.name
          }
          parent.children = this.getchilds(param.id, params)  // 获取子节点
          result.push(parent)
        }
      }
      return result
    },

    getchilds(id, array) {
      const childs = []
      for (const arr of array) {  // 循环获取子节点
        if (arr.parentId === id) {
          childs.push({
            'id': arr.id,
            'label': arr.name
          })
        }
      }
      for (const child of childs) { // 获取子节点的子节点
        const childscopy = this.getchilds(child.id, array)// 递归获取子节点
        if (childscopy.length > 0) {
          child.children = childscopy
        }
      }
      return childs
    }

递归生成后的树形结构数据
学新通

二、重新组合树结构中的数据

对原有的树形结构添加新的字段值
原数据

const treeData = [{
    name: '2021资源',
    key: '1',
    isLeaf: false,
    children: [{
        name: '服务器',
        isLeaf: false,
        key: '6',
        children: [
            {
                isLeaf: false,
                name: '172.168.201.109',
                key: '5',
                children: [
                    {
                        isLeaf: true,
                        children: [],
                        name: 'ping丢包率',
                        key: '2',
                    }, {
                        isLeaf: true,
                        children: [],
                        name: 'ping状态',
                        key: '3',
                    },
                ],
            },
            {
                isLeaf: true,
                children: [],
                name: '192.168.3.6',
                key: '7',
            },
        ],
    }],
}];

// 重新组合树数据(根据需要来重组树结构中的属性字段)
const dealTreeData = (treeData) => {
    const data = treeData.map((item) => ({
        ...item,
        // 新增title字段
        title: item.name,
        // 如果children为空数组，则置为null
        children: (item.children && item.children.length)
            ? dealTreeData(item.children)
            : null,
    }));
    return data;
};

console.log(JSON.stringify(dealTreeData(treeData)));

结果：

// 打印结果
// [{
//     name: '2021资源',
//     key: '1',
//     isLeaf: false,
//     title: '2021资源',
//     children: [{
//         name: '服务器',
//         isLeaf: false,
//         key: '6',
//         title: '服务器',
//         children: [{
//             isLeaf: false,
//             name: '172.168.201.109',
//             key: '5',
//             title: '172.168.201.109',
//             children: [{
//                 isLeaf: true,
//                 children: null,
//                 name: 'ping丢包率',
//                 key: '2',
//                 title: 'ping丢包率',
//             }, {
//                 isLeaf: true,
//                 children: null,
//                 name: 'ping状态',
//                 key: '3',
//                 title: 'ping状态',
//             }],
//         }, {
//             isLeaf: true,
//             children: null,
//             name: '192.168.3.6',
//             key: '7',
//             title: '192.168.3.6',
//         }],
//     }],
// }];

三、树形结构的基本操作使用

（1），获取树中的所有祖先节点名称

const treeData = [{
    key: '全部',
    title: '全部',
    isLeaf: false,
    children: [{
        key: '数据库',
        title: '数据库',
        isLeaf: false,
        children: [
            {
                key: 'mysql',
                title: 'mysql',
                isLeaf: false,
                children: [
                    {
                        key: '137',
                        title: 'QPS',
                        isLeaf: true,
                    }, {
                        key: '146',
                        title: 'MySQL进程信息',
                        isLeaf: true,
                    },
                ],
            },
            {
                key: 'oracle',
                title: 'oracle',
                isLeaf: false,
                children: [
                    {
                        key: '137',
                        title: 'QPS',
                        isLeaf: true,
                    },
                ],
            },
        ],
    }],
}];

// 获取树的所有祖先节点名称
const getTreeParents = (data) => {
    const parentKey = [];
    data.forEach((item) => {
        if (item.children && item.children.length) {
            parentKey.push(item.key);
            const temp = getTreeParents(item.children);
            if (temp.length) {
                parentKey.push(...temp);
            }
        }
    });
    return parentKey;
};

const parentKeys = getTreeParents(treeData);
console.log(parentKeys); // ["全部", "数据库", "mysql", "oracle"]

（2），获取树中叶子节点的总个数（节点中isLeaf为true的节点）

const treeData = {
    name: '2021资源',
    title: '2021资源',
    key: '1',
    isLeaf: false,
    children: [{
        name: '服务器',
        isLeaf: false,
        title: '服务器',
        key: '6',
        children: [
            {
                name: '172.168.201.109',
                isLeaf: false,
                title: '172.168.201.109',
                key: '5',
                children: [
                    {
                        name: 'ping丢包率',
                        isLeaf: true,
                        children: null,
                        title: 'ping丢包率',
                        key: '2',
                    }, {
                        name: 'ping状态',
                        isLeaf: true,
                        children: null,
                        title: 'ping状态',
                        key: '3',
                    },
                ],
            },
            {
                name: '192.168.3.6',
                isLeaf: true,
                children: null,
                title: '192.168.3.6',
                key: '7',
            },
        ],
    }],
};

const getLeafNum = (treeNode) => {
    let leafNum = 0;
    if (!treeNode) {
        return leafNum;
    }
    if (treeNode.children && treeNode.children.length) {
        treeNode.children.forEach((item) => {
            leafNum  = getLeafNum(item);
        });
    } else {
        if (treeNode.isLeaf) {
            leafNum  ;
        }
    }
    return leafNum;
};
console.log(getLeafNum(treeData)); // 3

（3），根据过滤条件筛选出需要留下节点的树结构数据（般用于前端做树的查询功能。）

/**
 * 递归过滤节点，但保留原树结构，即符合条件节点的父路径上所有节点不管是否符合条件都保留
 * @param {Node[]} nodes 要过滤的树
 * @param {node => boolean} predicate 过滤条件，符合条件的节点保留(参数为函数，返回值为布尔值)
 * @param {node => boolean} wrapMatchFn 层级条件(参数为函数，返回值为布尔值)
 * @return 过滤后的包含根节点数组
 */
export const filterSearchTree = (nodes, predicate, wrapMatchFn = () => false) => {
  // 如果已经没有节点了，结束递归
  if (!(nodes && nodes.length)) {
    return []
  }
  const newChildren = []
  for (let i = 0; i < nodes.length; i  ) {
    const node = nodes[i]
    // 想要截止匹配的那一层（如果有匹配的则不用递归了，直接取下面所有的子节点）
    if (wrapMatchFn(node) && predicate(node)) {
      newChildren.push(node)
      continue
    }
    const subs = filterSearchTree(node.children, predicate, wrapMatchFn)

    // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
    // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
    // 2. 自己本身符合条件
    if ((subs && subs.length) || predicate(node)) {
      node.children = subs || []
      newChildren.push(node)
    }
  }
  return newChildren.length ? newChildren : []
}

const treeData = [{
    key: '全部',
    title: '全部',
    isLeaf: false,
    children: [{
        key: '数据库',
        title: '数据库',
        isLeaf: false,
        children: [
            {
                key: 'mysql',
                title: 'mysql',
                isLeaf: false,
                children: [
                    {
                        key: '142',
                        title: '慢查询',
                        isLeaf: true,
                    }, {
                        key: '137',
                        title: 'QPS',
                        isLeaf: true,
                    }, {
                        key: '143',
                        title: '用户列表',
                        isLeaf: true,
                    },
                ],
            },
            {
                key: '166',
                title: 'SQL',
                isLeaf: true,
            },
        ],
    }],
}];

// 要查找的关键字
const searchValue = 'S';

// 筛选到的树结构数据
const newTreeData = filterSearchTree(
    treeData,
    (node) => {
        if (node.title.indexOf(searchValue) !== -1) {
            return true;
        }
        return false;
    },
);
// const newTreeData = filterSearchTree(
//   cloneTreeDatas,
//   (node) => {
//     if (node.title.includes(searchValue)) {
//       return true
//     }
//     return false
//   },
//   (node) => {
//     // 第二层（显示左侧角色组数据）
//     if (node.groupName) {
//       return true
//     }
//     return false
//   }
// )
console.log(JSON.stringify(newTreeData));
// 打印的结果
// [{
//     key: '全部',
//     title: '全部',
//     isLeaf: false,
//     children: [{
//         key: '数据库',
//         title: '数据库',
//         isLeaf: false,
//         children: [{
//             key: 'mysql',
//             title: 'mysql',
//             isLeaf: false,
//             children: [{
//                 key: '137',
//                 title: 'QPS',
//                 isLeaf: true,
//                 children: null,
//             }],
//         }, {
//             key: '166',
//             title: 'SQL',
//             isLeaf: true,
//             children: null,
//         }],
//     }],
// }];

这篇好文章是转载于：学新通技术网

js通过递归实现树形数据操作

一、处理复杂数据结构转成树形数据操作

二、重新组合树结构中的数据

三、树形结构的基本操作使用

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐