JS遍历树形数据

简介: JS遍历树形数据

树形数据结构遍历某个key值


深度优先遍历(DFS)


let tree = [{
    id: '1',
    name: '节点1',
    children: [{
        id: '1-1',
        name: '节点1-1'
    }]
}, {
    id: '2',
    name: '节点2',
    children: [{
        id: '2-1',
        name: '节点2-1'
    }, {
        id: '2-2',
        name: '节点2-2',
        children: [{
            id: '2-2-1',
            name: '节点2-2-1'
        }]
    }]
}, {
    id: '3',
    name: '节点3'
}, {
    id: '4',
    name: '节点4'
}]
function treeIterator(tree, func) {
    tree.forEach((node) => {
        func(node)
        node.children && treeIterator(node.children, func)
    })
}
treeIterator(tree, (node) => {
    console.log(node.name)
})

1425695-20220510210806353-2017515833.png

循环实现


function treeIterator(tree, func) {
    let node, curTree = [...tree]
    while ((node = curTree.shift())) {
        func(node)
        node.children && curTree.unshift(...node.children)
    }
}
treeIterator(tree, (node) => {
    console.log(node.name)
})


广度优遍历


function treeIterator(tree, func) {
  let node, curTree = [...tree]
  while ((node = curTree.shift())) {
    func(node)
    node.children && curTree.push(...node.children)
  }
}
treeIterator(tree, (node) => {
  console.log(node.name)
})




相关文章
|
6月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1030 58
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
12月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
454 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
108 7
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
217 4
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
347 11
|
JavaScript
js之遍历方法
js之遍历方法
88 0
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
355 0
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)