【JS】递归获取树的所有叶子节点

最新推荐文章于 2024-01-18 09:53:16 发布
最新推荐文章于 2024-01-18 09:53:16 发布
阅读量4.5k 收藏 13
点赞数 2
分类专栏： JavaScript 数据处理 前端 文章标签： js javascript 数据处理 递归 叶子结点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MacwinWin/article/details/120508237
版权
数据处理 同时被 3 个专栏收录
57 篇文章 1 订阅
订阅专栏
JavaScript
16 篇文章 0 订阅
订阅专栏
前端
13 篇文章 0 订阅
订阅专栏

在这里插入图片描述
《前后端分离》
出差中，与前端直线距离约1000km

假设我们从后端获取到的json数据如下

{
  "success": true,
  "code": "200",
  "message": "成功获取产品档案",
  "data": [
    {
      "id": "01",
      "name": "01名称",
      "list": [
        {
          "id": "001",
          "name": "001名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "01-001-001-001",
                  "name": "01-001-001-001名称",
                  "specification": "01-001-001-001规格",
                  "type": "01-001-001-001型号"
                },
                {
                  "id": "01-001-001-002",
                  "name": "01-001-001-002名称",
                  "specification": "01-001-001-002规格",
                  "type": "01-001-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "01-001-002-001",
                  "name": "01-001-002-001名称",
                  "specification": "01-001-002-001规格",
                  "type": "01-001-002-001型号"
                },
                {
                  "id": "01-001-002-002",
                  "name": "01-001-002-002名称",
                  "specification": "01-001-002-002规格",
                  "type": "01-001-002-002型号"
                }
              ]
            }
          ]
        },
        {
          "id": "002",
          "name": "002名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "01-002-001-001",
                  "name": "01-002-001-001名称",
                  "specification": "01-002-001-001规格",
                  "type": "01-002-001-001型号"
                },
                {
                  "id": "01-002-001-002",
                  "name": "01-002-001-002名称",
                  "specification": "01-002-001-002规格",
                  "type": "01-002-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "01-002-002-001",
                  "name": "01-002-002-001名称",
                  "specification": "01-002-002-001规格",
                  "type": "01-002-002-001型号"
                },
                {
                  "id": "01-002-002-002",
                  "name": "01-002-002-002名称",
                  "specification": "01-002-002-002规格",
                  "type": "01-002-002-002型号"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "02",
      "name": "02名称",
      "list": [
        {
          "id": "001",
          "name": "001名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "02-001-001-001",
                  "name": "02-001-001-001名称",
                  "specification": "02-001-001-001规格",
                  "type": "02-001-001-001型号"
                },
                {
                  "id": "02-001-001-002",
                  "name": "02-001-001-002名称",
                  "specification": "01-001-001-002规格",
                  "type": "02-001-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "02-001-002-001",
                  "name": "02-001-002-001名称",
                  "specification": "02-001-002-001规格",
                  "type": "02-001-002-001型号"
                },
                {
                  "id": "02-001-002-002",
                  "name": "02-001-002-002名称",
                  "specification": "02-001-002-002规格",
                  "type": "02-001-002-002型号"
                }
              ]
            }
          ]
        },
        {
          "id": "002",
          "name": "002名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "02-002-001-001",
                  "name": "02-002-001-001名称",
                  "specification": "02-002-001-001规格",
                  "type": "02-002-001-001型号"
                },
                {
                  "id": "02-002-001-002",
                  "name": "02-002-001-002名称",
                  "specification": "02-002-001-002规格",
                  "type": "02-002-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "02-002-002-001",
                  "name": "02-002-002-001名称",
                  "specification": "02-002-002-001规格",
                  "type": "02-002-002-001型号"
                },
                {
                  "id": "02-002-002-002",
                  "name": "02-002-002-002名称",
                  "specification": "02-002-002-002规格",
                  "type": "02-002-002-002型号"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

我们希望获取到所有的叶子结点

[
  {
    id: '01-001-001-001',
    name: '01-001-001-001名称',
    specification: '01-001-001-001规格',
    type: '01-001-001-001型号'
  },
  {
    id: '01-001-001-002',
    name: '01-001-001-002名称',
    specification: '01-001-001-002规格',
    type: '01-001-001-002型号'
  },
  {
    id: '01-001-002-001',
    name: '01-001-002-001名称',
    specification: '01-001-002-001规格',
    type: '01-001-002-001型号'
  },
  {
    id: '01-001-002-002',
    name: '01-001-002-002名称',
    specification: '01-001-002-002规格',
    type: '01-001-002-002型号'
  },
  {
    id: '01-002-001-001',
    name: '01-002-001-001名称',
    specification: '01-002-001-001规格',
    type: '01-002-001-001型号'
  },
  {
    id: '01-002-001-002',
    name: '01-002-001-002名称',
    specification: '01-002-001-002规格',
    type: '01-002-001-002型号'
  },
  {
    id: '01-002-002-001',
    name: '01-002-002-001名称',
    specification: '01-002-002-001规格',
    type: '01-002-002-001型号'
  },
  {
    id: '01-002-002-002',
    name: '01-002-002-002名称',
    specification: '01-002-002-002规格',
    type: '01-002-002-002型号'
  },
  {
    id: '02-001-001-001',
    name: '02-001-001-001名称',
    specification: '02-001-001-001规格',
    type: '02-001-001-001型号'
  },
  {
    id: '02-001-001-002',
    name: '02-001-001-002名称',
    specification: '01-001-001-002规格',
    type: '02-001-001-002型号'
  },
  {
    id: '02-001-002-001',
    name: '02-001-002-001名称',
    specification: '02-001-002-001规格',
    type: '02-001-002-001型号'
  },
  {
    id: '02-001-002-002',
    name: '02-001-002-002名称',
    specification: '02-001-002-002规格',
    type: '02-001-002-002型号'
  },
  {
    id: '02-002-001-001',
    name: '02-002-001-001名称',
    specification: '02-002-001-001规格',
    type: '02-002-001-001型号'
  },
  {
    id: '02-002-001-002',
    name: '02-002-001-002名称',
    specification: '02-002-001-002规格',
    type: '02-002-001-002型号'
  },
  {
    id: '02-002-002-001',
    name: '02-002-002-001名称',
    specification: '02-002-002-001规格',
    type: '02-002-002-001型号'
  },
  {
    id: '02-002-002-002',
    name: '02-002-002-002名称',
    specification: '02-002-002-002规格',
    type: '02-002-002-002型号'
  }
]

JavaScript代码如下：

var jsObjects = {
  "success": true,
  "code": "200",
  "message": "成功获取产品档案",
  "data": [
    {
      "id": "01",
      "name": "01名称",
      "list": [
        {
          "id": "001",
          "name": "001名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "01-001-001-001",
                  "name": "01-001-001-001名称",
                  "specification": "01-001-001-001规格",
                  "type": "01-001-001-001型号"
                },
                {
                  "id": "01-001-001-002",
                  "name": "01-001-001-002名称",
                  "specification": "01-001-001-002规格",
                  "type": "01-001-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "01-001-002-001",
                  "name": "01-001-002-001名称",
                  "specification": "01-001-002-001规格",
                  "type": "01-001-002-001型号"
                },
                {
                  "id": "01-001-002-002",
                  "name": "01-001-002-002名称",
                  "specification": "01-001-002-002规格",
                  "type": "01-001-002-002型号"
                }
              ]
            }
          ]
        },
        {
          "id": "002",
          "name": "002名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "01-002-001-001",
                  "name": "01-002-001-001名称",
                  "specification": "01-002-001-001规格",
                  "type": "01-002-001-001型号"
                },
                {
                  "id": "01-002-001-002",
                  "name": "01-002-001-002名称",
                  "specification": "01-002-001-002规格",
                  "type": "01-002-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "01-002-002-001",
                  "name": "01-002-002-001名称",
                  "specification": "01-002-002-001规格",
                  "type": "01-002-002-001型号"
                },
                {
                  "id": "01-002-002-002",
                  "name": "01-002-002-002名称",
                  "specification": "01-002-002-002规格",
                  "type": "01-002-002-002型号"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "id": "02",
      "name": "02名称",
      "list": [
        {
          "id": "001",
          "name": "001名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "02-001-001-001",
                  "name": "02-001-001-001名称",
                  "specification": "02-001-001-001规格",
                  "type": "02-001-001-001型号"
                },
                {
                  "id": "02-001-001-002",
                  "name": "02-001-001-002名称",
                  "specification": "01-001-001-002规格",
                  "type": "02-001-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "02-001-002-001",
                  "name": "02-001-002-001名称",
                  "specification": "02-001-002-001规格",
                  "type": "02-001-002-001型号"
                },
                {
                  "id": "02-001-002-002",
                  "name": "02-001-002-002名称",
                  "specification": "02-001-002-002规格",
                  "type": "02-001-002-002型号"
                }
              ]
            }
          ]
        },
        {
          "id": "002",
          "name": "002名称",
          "list": [
            {
              "id": "001",
              "name": "001名称",
              "list": [
                {
                  "id": "02-002-001-001",
                  "name": "02-002-001-001名称",
                  "specification": "02-002-001-001规格",
                  "type": "02-002-001-001型号"
                },
                {
                  "id": "02-002-001-002",
                  "name": "02-002-001-002名称",
                  "specification": "02-002-001-002规格",
                  "type": "02-002-001-002型号"
                }
              ]
            },
            {
              "id": "002",
              "name": "002名称",
              "list": [
                {
                  "id": "02-002-002-001",
                  "name": "02-002-002-001名称",
                  "specification": "02-002-002-001规格",
                  "type": "02-002-002-001型号"
                },
                {
                  "id": "02-002-002-002",
                  "name": "02-002-002-002名称",
                  "specification": "02-002-002-002规格",
                  "type": "02-002-002-002型号"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

/* 参数
* array 树结构 查找所有叶子节点
*/
function parseTreeJson(array) {
    for (let index = 0; index < array.length; index++) {
        const element = array[index];
        // 判断element.children是对象
        if (element.list && typeof (element.list) == 'object') {
            parseTreeJson(element.list)
        } else {
            // 判断是否为子节点
            if (! (element.list || typeof (element.children) == 'array')) {
                // 获得符合的 node
                nodes.push(element);
            }
        }
    }
}

var nodes = [];
parseTreeJson(jsObjects.data);

参考：https://segmentfault.com/a/1190000022056355

micromicrofat
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2-9课：树和图的现实意义、区别与联系
YeJuliaLi的博客
09-22 1725
二叉树树的遍历 树的遍历和图的遍历 在计算机科学里，树的遍历指按照某种规则，不重复地访问树的所有节点的过程。具体的访问操作可能是检查节点的值、更新节点的值等。不同的遍历方式，其访问节点的顺序是不一样的。 因为树是图的一个子集，因此，树的遍历，也属于图遍历的子集。图遍历的原则主要有深度优先和广度优先两种。 这两大遍历原则对于树也同样适用。又因为有根树是树的一种，二叉树是有根树的一种，二叉树的遍历也分...
JS 递归树结构数据查找所有叶子节点
qq_36437172的博客
08-25 7027
JS 递归树结构数据查找所有叶子节点 export function getAllLeaf (data) { let result = [] function getLeaf (data) { data.forEach(item => { if (!item.children) { result.push(item.path) } ...
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
朝阳39的博客
02-28 3911
目录 树的源数据 获取树的深度 提取并统计树所有的节点 提取并统计树的叶子节点 树的源数据 treeData: { "label": "中国", "children": [ { "label": "浙江", .
js 递归查询所有的叶子结点_浅谈mysql的查询过程
weixin_31995251的博客
12-30 315
步骤查询过程上看，大致步骤如下：查看缓存中是否存在id如果有则从内存中访问，否则要访问磁盘将索引数据存入内存，利用索引来访问数据对于数据也会检查数据是否存在于内存如果没有则访问磁盘获取数据，读入内存返回结果遍历索引(B+树)主键索引(聚集索引)从上至下遍历一次B+树，直到找到具体的主键，拿到叶子结点存储的数据。辅助索引(二级索引)需要遍历两次B+树，第一次遍历是找到对应的主键，第二次遍历是根据主键...
[js] 查找树结构数据中的指定节点，查找指定节点的所有叶子节点，查找整棵树的所有叶子节点, 获取指定节点的所有子孙节点,判断树形结构中的某个节点是否为叶子节点
最新发布
qq_14993591的博客
01-18 1788
【代码】[js] 查找树结构数据中的指定节点，查找指定节点的所有叶子节点，查找整棵树的所有叶子节点。
2.2基本算法之递归和自调用函数_两次递归调用自己的递归函数与二叉树的前、中、后序遍历...
weixin_39986466的博客
11-24 826
1 什么是递归递归，在数学与计算机科学中，是指在函数的定义中使用函数自身的方法。也就是说，递归算法是一种直接或者间接调用自身函数或者方法的算法。通俗来说，递归算法的实质是把问题分解成规模缩小的同类问题的子问题，然后递归调用方法来表示问题的解。简单的递归问题如求解阶乘：复杂一点递归如计算斐波那契数列：斐波那契数列的计算相对于阶乘的计算要复杂一点，在函数中两次递归调用自己。2 递归的基本原理第一、每一...
python json 递归打印所有json子节点信息的例子
12-20
如果传入的不是字典，函数则执行`else`分支，表示已经到达叶子节点。 接着，我们来看一个补充拓展的例子，`dict_generator`和`recursive_findall`函数。`dict_generator`用于生成一个JSON结构的扁平化表示，它将...
js代码-树节点的递归遍历
07-16
每个节点可以有零个或多个子节点，没有父节点的节点称为根节点，而没有子节点的节点称为叶子节点。树结构常用于表示文件系统、HTML DOM、路由表等场景。 递归遍历是指通过调用自身来遍历树的所有节点。主要有两种...
js代码-非叶子节点
07-16
在JavaScript编程中，"非叶子...综上所述，`js代码-非叶子节点`涉及到JavaScript中的数据结构、遍历算法、操作树结构以及可能的前端交互实现。通过理解和实践这些概念，开发者可以有效地处理复杂的数据组织和交互需求。
js代码-（算法）（二叉树）到叶子节点和等于n
07-16
本文将深入探讨如何通过JS代码解决一个特定的二叉树问题：找到所有从根节点到叶子节点的路径，其路径上的节点值之和等于给定的目标值`n`。 首先，我们需要理解二叉树的基本概念。二叉树每个节点包含一个值，一个左...
js 递归查询所有的叶子结点_JS实现堆排序
weixin_32661683的博客
12-08 299
堆的预备知识堆是一个完全二叉树。完全二叉树：二叉树除开最后一层，其他层结点数都达到最大，最后一层的所有结点都集中在左边(左边结点排列满的情况下，右边才能缺失结点)。大顶堆：根结点为最大值，每个结点的值大于或等于其孩子结点的值。小顶堆：根结点为最小值，每个结点的值小于或等于其孩子结点的值。堆的存储：堆由数组来实现，相当于对二叉树做层序遍历。如下图：对于结点 i ，其子结点为 2i+1 与 ...
LeetCode 86. 分隔链表 中等难度
chenyson的博客
10-12 108
题目 给定一个链表和一个特定值 x，对链表进行分隔，使得所有小于 x 的节点都在大于或等于 x 的节点之前。 你应当保留两个分区中每个节点的初始相对位置。 示例: 输入: head = 1->4->3->2->5->2, x = 3 输出: 1->2->2->4->3->5 解题思路： 代码： /** * Definition for singly-linked list. * struct ListNode
算法：左叶子之和
weixin_40925514的博客
09-19 186
题目： 计算给定二叉树的所有左叶子之和。 3 / \ 9 20 / \ 15 7 在这个二叉树中，有两个左叶子，分别是 9 和 15，所以返回 24 思路 初始化结果self.res 从根节点开始，深度遍历。遇到左子节点，self.res += node.val 左子节点的判断条件是左边的子节点，且该节点没有子节点。 递归 (这里有个小技巧，递归的时候，给一个code，用来区分左子节点和右子节点） 代码 # Definition for a binary tree
js递归树结构计算每个节点的叶子节点的数量并且输出
S筱潇S四维Smile
04-22 1997
var json = { "text" : "表格列名称", "children" : [{ "text" : "序号", "children" : [{ "text" : "序号一", "children" : [] },{ ...
树形结构数据递归找出符合条件的第一个叶子节点
zongmaomx的博客
08-25 3505
最近遇到一个需求，使用ele-tree组件，需要默认选中第一个子节点。 数据结构如下，需要找到第一个isLeaf == true的叶子节点对象，此处即闸站21 const test = [ { name: '泵站', id: 'bengzhan', isLeaf: false, children: [] }, { name: '泵站',
Vue.js 虚拟DOM原理（DOM是如何更新的）
~
09-01 4594
一、什么是DOM？DOM的作用？ 文档对象模型（Document Object model，简称DOM）是针对HTML和XML文档的一个API（应用程序编程接口）。 也就是说：DOM是一个接口，一个API,我们可以通过DOM这个接口来对文档进行修改。 DOM会把文档表示为一棵树，这里以（HTML）为例： HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
二叉树层序遍历递归与非递归_二叉树—层序遍历和前序、中序、后序遍历(递归)详解...
weixin_39817391的博客
11-22 208
层序遍历层序遍历。听名字也知道是按层遍历。我们知道一个节点有左右节点。而每一层一层的遍历都和左右节点有着很大的关系。也就是我们选用的数据结构不能一股脑的往一个方向钻，而左右应该均衡考虑。这样我们就选用队列来实现。对于队列，现进先出。从根节点的节点push到队列，那么队列中先出来的顺序是第二层的左右(假设有)。第二层每个执行的时候添加到队列，那么添加的所有节点都在第二层后面。同理，假设开始pop遍历...
elementui tree树获取所有叶子节点
weixin_42674490的博客
01-18 2711
var allNodes = this.$refs.treeRef.store._getAllNodes() var leafNodes = allNodes.filter(item => item.isLeaf) 但是由于我赋值给tree数据之后马上执行这些语句，allNodes 会返回空数组， 所以需要在外层加上this.$nextTick this.$nextTick(() => { var allNodes = this.$refs.treeRef.store._getAllNod
已知树节点获取树的节点路径（js树节点路径）
m0_57601349的博客
04-17 2009
1.目的 通过树的叶子结点id，得到输的叶子节点路径。 2.数据结构 树的存储方式——[ ]; 示例数据结构; const treeData = [ { name: "擎天柱", id: 1, children: [ { name: "大黄蜂", id: 10, children: [
使用javaScript编写一个只获取树结构的叶子节点的方法
07-14
当你说 "只获取树结构的叶子节点的方法"，我理解为你想要一个函数，能够从给定的树结构中提取出所有叶子节点。下面是一个使用 JavaScript 编写的示例函数： ```javascript function getLeafNodes(tree) { let leafNodes = []; function traverse(node) { if (node.children.length === 0) { leafNodes.push(node); } else { node.children.forEach(child => traverse(child)); } } traverse(tree); return leafNodes; } ``` 这个函数接受一个树结构作为参数，并使用递归方式遍历树的节点。如果一个节点没有子节点（即叶子节点），则将其添加到 `leafNodes` 数组中。最后，返回包含所有叶子节点的数组。 请注意，这只是一个示例函数，你需要根据你的具体树结构进行相应的调整和适配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值