js树结构数据的递归操作

1、获取树中的所有祖先节点名称2、根据过滤条件筛选出需要留下节点的树结构数据3、获取树中叶子节点的总个数4、重新组合树结构中的数据5、根据id和pid把json结构转树状结构

winne雪

21195人浏览 · 2020-09-07 18:07:11

winne雪 · 2020-09-07 18:07:11 发布

一、获取树中的所有祖先节点名称

一般用于手动设置vue/react的UI库中的树默认全部展开节点。

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,
                    },
                ],
            },
        ],
    }],
}];

/**
 * 获取树的所有祖先节点指定的key名
 * @param {Array} treeData 树数据
 * @param {String} childrenStr 子节点的键名
 * @param {String} keyStr 获取指定的key名
 * @returns 获取树链路上所有指定的key名数组
 */
export const getTreeParents = (treeData, childrenStr = 'children', keyStr = 'key') => {
  const parentKey = []
  treeData.forEach((item) => {
    if (item[childrenStr] && item[childrenStr].length) {
      parentKey.push(item[keyStr])
      const temp = getTreeParents(item[childrenStr], childrenStr, keyStr)
      if (temp.length) {
        parentKey.push(...temp)
      }
    }
  })
  return parentKey
}

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

二、获取树中指定节点的祖先节点id集合

一般用于手动设置vue/react的UI库中的树默认展开指定菜单项。

const tree = [
  {
    id: 11524,
    text: '店铺',
    leaf: false,
    children: [
      {
        id: 11525,
        text: '子店铺',
        leaf: false,
        children: []
      }
    ]
  },
  {
    id: 11526,
    text: '品种',
    leaf: false,
    children: [
      {
        id: 11527,
        text: '类目',
        leaf: false,
        children: [
          {
            id: 11530,
            text: '一级分类',
            leaf: false,
            children: []
          },
          {
            id: 11531,
            text: '二级分类',
            leaf: false,
            children: []
          },
          {
            id: 11532,
            text: '三级分类',
            leaf: false,
            children: []
          }
        ]
      },
      {
        id: 11528,
        text: '产品',
        leaf: false,
        children: [
          {
            id: 11533,
            text: '单品',
            leaf: false,
            children: []
          },
          {
            id: 11534,
            text: '套装',
            leaf: false,
            children: []
          }
        ]
      },
      {
        id: 11529,
        text: '价格',
        leaf: false,
        children: [
          {
            id: 11535,
            text: '价格策略',
            leaf: false,
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 11536,
    text: '店铺计划',
    leaf: false,
    children: [
      {
        id: 11537,
        text: '零售计划',
        leaf: false,
        children: []
      },
      {
        id: 11538,
        text: '品种计划',
        leaf: false,
        children: []
      }
    ]
  },
  {
    id: 11539,
    text: '基础配置',
    leaf: false,
    children: [
      {
        id: 11540,
        text: '平台配置',
        leaf: false,
        children: []
      }
    ]
  }
]
/**
 * 获取树指定节点的祖先id集合
 * @param {Array} treeData 树数据
 * @param {String/Number} id 要指定的子节点的id
 * @returns 获取树指定节点的祖先们id数组
 */
const getParentIdList = (treeData, id) => {
  if (!treeData || !id) {
    return ''
  }
  const arr = []
  const findParent = (data, nodeId, parentId = '') => {
    for (var i = 0, length = data.length; i < length; i++) {
      let node = data[i]
      if (node.id === nodeId) {
        node.children?.length && arr.unshift(nodeId)
        // 如果已经到达最顶层则退出循环
        if (nodeId === treeData[0].id) {
          break
        }
        findParent(treeData, parentId)
        break
      } else {
        if (node.children?.length) {
          findParent(node.children, nodeId, node.id)
        }
        continue
      }
    }
    return arr
  }
  return findParent(treeData, id)
}

const parentIds = getParentIdList(tree, 11534)
console.log('parentIds:', parentIds) // [11526, 11528]

三、根据过滤条件筛选出需要留下节点的树结构数据

一般用于前端做树的查询功能。

/**
 * 递归过滤节点，但保留原树结构，即符合条件节点的父路径上所有节点不管是否符合条件都保留
 * @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,
//         }],
//     }],
// }];

四、获取树中叶子节点的总个数（节点中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

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

一般用于因后端给的数据字段不够完善，类型不正确，需要前端进行处理树数据。

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',
//         }],
//     }],
// }];

六、根据id和pid把json结构转树状结构

const jsonData = [
    { id: '0', pid: '-1', name: '666' },
    { id: '4', pid: '1', name: '大家电' },
    { id: '5', pid: '1', name: '生活电器' },
    { id: '1', pid: '0', name: '家用电器' },
    { id: '2', pid: '0', name: '服饰' },
    { id: '3', pid: '0', name: '化妆' },
    { id: '7', pid: '4', name: '空调' },
    { id: '8', pid: '4', name: '冰箱' },
    { id: '9', pid: '4', name: '洗衣机' },
    { id: '10', pid: '4', name: '热水器' },
    { id: '11', pid: '3', name: '面部护理' },
    { id: '12', pid: '3', name: '口腔护理' },
    { id: '13', pid: '2', name: '男装' },
    { id: '14', pid: '2', name: '女装' },
    { id: '15', pid: '7', name: '海尔空调' },
    { id: '16', pid: '7', name: '美的空调' },
    { id: '19', pid: '5', name: '加湿器' },
    { id: '20', pid: '5', name: '电熨斗' },
    { id: '21', pid: '20', name: '电熨斗子项' },
];

/**
 * 根据id和pid把json结构 转 树状结构
 * @param  jsonArr  {json}      json数据
 * @param  idStr  {String}    id的属性名
 * @param  pidStr  {String}    父id的属性名
 * @param  childrenStr  {String}    children的属性名
 * @return  {Array}     数组
 */
const transData = (jsonArr, idStr, pidStr, childrenStr) => {
    // 存放的最终结果树数组
    const result = [];
    const id = idStr;
    const pid = 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[pid]];
        if (hashItem) {
            // 如果当前项还没有children属性，则添加该属性并设置为空数组
            !hashItem[children] && (hashItem[children] = []);
            hashItem[children].push(jsonArrItem);
        } else {
            result.push(jsonArrItem);
        }
    }
    return result;
};

const jsonDataTree = transData(jsonData, 'id', 'pid', 'children');
console.log(jsonDataTree);

输出结果：
在这里插入图片描述

七、打平树结构数据

// 把树结构数据打平为一维数组
const flatTree = (treeData) => {
  let result = []
  treeData.forEach((item) => {
    // 先克隆一份数据作为第一层级的填充
    let res = JSON.parse(JSON.stringify(item))
    delete res.children
    result.push(res)
    if (item.children && item.children.length > 0) {
      // 如果当前children为数组并且长度大于0，才可进入flatTree()方法
      result = result.concat(flatTree(item.children))
    }
  })
  return result
}

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

华为云开发者联盟

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

华为云开发者联盟

cover

华为云云原生FinOps解决方案，释放云原生最大价值

华为云开发者联盟

所有评论(0)

查看更多评论

winne雪

已为社区贡献5条内容