树形数据 — 已知树形结构时的常见操作

最新推荐文章于 2023-10-23 14:26:52 发布

进击的大知

最新推荐文章于 2023-10-23 14:26:52 发布

阅读量136

点赞数 1

分类专栏：数组文章标签： javascript 前端数组

本文链接：https://blog.csdn.net/w210825/article/details/121186434

版权

数组专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现三个关键操作：根据id查找完整子节点、沿层级追踪完整id路径以及查找除自身外的父级id。通过示例展示了`getChidlren`、`findParents`和`findParents1`函数在给定树形数据结构`arrData`中的应用。

摘要由CSDN通过智能技术生成

已知树形结构时的常见操作：

由子数据的id在整棵树data中找到完整的子数据
由子数据的id在整棵树data中从上往下找到完整的id
由子数据的id在整棵树data中找到从下往上除自己之外的id

  var arrData = [
    {

      label: "中国",
      parentId: null,
      id: "0",
      children: [
        {
          label: "河北",
          parentId: "0",
          id: "1",
          children: [
            {
              label: "石家庄",
              parentId: "1",
              id: "1.1",
              children: null
            },
            {
              label: "邯郸",
              parentId: "1",
              id: "1.3",
              children: [
                {
                  label: "邯山区",
                  parentId: "1.3",
                  id: "1.3.1",
                  children: [
                    {
                      label: "丛西街道",
                      parentId: "1.3.1",
                      id: "1.3.1.1",
                    }
                  ]
                },
              ]
            }
          ]
        },
        {
          label: "山东",
          parentId: "0",
          id: "2",
          children: [
            {
              label: "济南",
              parentId: "2",
              id: "2.1",
            }
          ]
        },
        {
          label: "北京",
          parentId: "0",
          id: "3",
        }
      ]
    },
  ]

  /*
   * 由子数据的id在整棵树data中找到完整的子数据
   */
  function getChidlren(data, id) {
    var result = null;
    var fn = function (data) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          if (item.id === id) {
            result = item;
          } else if (item.children) {
            fn(item.children);
          }
        })
      }
    }
    fn(data);
    return result;
  }

  console.log('完整的子数据', getChidlren(arrData, '1.3.1.1')); // {label: '丛西街道', parentId: '1.3.1', id: '1.3.1.1'}


  /*
   * 由子数据的id在整棵树data中从上往下找到完整的id
   */
  function findParents(treeData, id) {
    let allparents = []
    if (treeData.length == 0) return
    let findele = (data, id) => {
      if (!id) return
      data.forEach((item, index) => {
        if (item.id == id) {
          allparents.unshift(item.id)
          findele(treeData, item.parentId)
        } else {
          if (!!item.children) {
            findele(item.children, id)
          }
        }
      })
    }
    findele(treeData, id)
    return allparents
  }
  console.log('完整的层级id', findParents(arrData, "1.3.1.1")) // ['0', '1', '1.3', '1.3.1', '1.3.1.1']


  /*
   * 由子数据的id在整棵树data中找到从下往上除自己之外的id
   */

  function findParents1(treeData, id) {
    if (treeData.length == 0) return
    for (let i = 0; i < treeData.length; i++) {
      if (treeData[i].id == id) {
        return []
      } else {
        if (treeData[i].children) {
          let res = findParents1(treeData[i].children, id)
          if (res !== undefined) {
            return res.concat(treeData[i].id)
          }
        }
      }
    }
  }
  console.log('111', findParents1(arrData, "1.3.1")) // ['1.3', '1', '0']