js深度优先和广度优先遍历语法树

在遍历html语法树中用到了深度优先遍历和广度优先遍历，就自己用js实现了下

//广度遍历html节点
function breadthSearch(item, childProp){
    const nodeList=[item]
    let index=0;
    while (index<nodeList.length){
        const node=nodeList[index++];
        if(node[childProp]){
            for(let k in node[childProp]){
                nodeList.push(node[childProp][k]);
            }
        }
    }
    return nodeList;
}
//深度遍历html节点
function depthSearch(node,childProp){
    const nodeList=[]
    const depthEach=function(item){
        nodeList.push(item);
        if(item[childProp]){
            for(let k in item[childProp]){
                depthEach(item[childProp][k]);
            }
        }
    }
    depthEach(node);
    return nodeList;
}

测试

//html的语法树
const astJSON={
    "type": 1,
    "tag": "body",
    "attrsList": [],
    "attrsMap": {},
    "rawAttrsMap": {},
    "children": [
        {
            "type": 1,
            "tag": "div",
            "attrsList": [],
            "attrsMap": {},
            "rawAttrsMap": {},
            "parent": "[Circular ~]",
            "children": [
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.0]",
                    "children": [
                        {
                            "type": 3,
                            "text": "\n    foo\n  ",
                            "start": 37,
                            "end": 48,
                            "static": true
                        }
                    ],
                    "start": 31,
                    "end": 55,
                    "plain": true,
                    "static": true
                },
                {
                    "type": 3,
                    "text": " ",
                    "start": 55,
                    "end": 58,
                    "static": true
                },
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.0]",
                    "children": [
                        {
                            "type": 3,
                            "text": "bar",
                            "start": 64,
                            "end": 67,
                            "static": true
                        }
                    ],
                    "start": 58,
                    "end": 74,
                    "plain": true,
                    "static": true
                }
            ],
            "start": 23,
            "end": 81,
            "plain": true,
            "static": true
        },
        {
            "type": 3,
            "text": " ",
            "start": 81,
            "end": 83,
            "static": true
        },
        {
            "type": 1,
            "tag": "div",
            "attrsList": [],
            "attrsMap": {},
            "rawAttrsMap": {},
            "parent": "[Circular ~]",
            "children": [
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.2]",
                    "children": [
                        {
                            "type": 3,
                            "text": "\n  foo\n  ",
                            "start": 127,
                            "end": 136,
                            "static": true
                        }
                    ],
                    "start": 121,
                    "end": 143,
                    "plain": true,
                    "static": true
                },
                {
                    "type": 3,
                    "text": " ",
                    "start": 143,
                    "end": 144,
                    "static": true
                },
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.2]",
                    "children": [
                        {
                            "type": 3,
                            "text": "bar",
                            "start": 150,
                            "end": 153,
                            "static": true
                        }
                    ],
                    "start": 144,
                    "end": 160,
                    "plain": true,
                    "static": true
                }
            ],
            "start": 115,
            "end": 167,
            "plain": true,
            "static": true
        },
        {
            "type": 3,
            "text": " ",
            "start": 167,
            "end": 169,
            "static": true
        },
        {
            "type": 1,
            "tag": "div",
            "attrsList": [],
            "attrsMap": {},
            "rawAttrsMap": {},
            "parent": "[Circular ~]",
            "children": [
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.4]",
                    "children": [
                        {
                            "type": 3,
                            "text": " foo ",
                            "start": 212,
                            "end": 217,
                            "static": true
                        }
                    ],
                    "start": 206,
                    "end": 224,
                    "plain": true,
                    "static": true
                },
                {
                    "type": 3,
                    "text": " ",
                    "start": 224,
                    "end": 225,
                    "static": true
                },
                {
                    "type": 1,
                    "tag": "span",
                    "attrsList": [],
                    "attrsMap": {},
                    "rawAttrsMap": {},
                    "parent": "[Circular ~.children.4]",
                    "children": [
                        {
                            "type": 3,
                            "text": "bar",
                            "start": 231,
                            "end": 234,
                            "static": true
                        }
                    ],
                    "start": 225,
                    "end": 241,
                    "plain": true,
                    "static": true
                }
            ],
            "start": 201,
            "end": 247,
            "plain": true,
            "static": true
        }
    ],
    "start": 0,
    "end": 255,
    "plain": true,
    "static": true,
    "staticInFor": false,
    "staticRoot": true,
    "staticProcessed": true
}

//广度优先遍历
breadthSearch(astJSON,‘children‘).forEach(function (node) {
    if(node.type===1)
        console.log(node.tag)
})

//深度优先遍历
depthSearch(astJSON,‘children‘).forEach(function (node) {
    if(node.type===1)
        console.log(node.tag)
})

广度优先　　

body
div
div
div
span
span
span
span
span
span

深度优先
body
div
span
span
div
span
span
div
span
span

原文地址：https://www.cnblogs.com/caoke/p/10990148.html

时间： 2024-08-01 08:19:39

js深度优先和广度优先遍历语法树的相关文章

树的深度优先与广度优先遍历

简述树的深度优先及广度优先遍历算法,并说明非递归实现. 原题出自百度的笔试: 当时我看到这个题目的时候,已经完全记不得非递归算法该怎么实现了,后来查阅了一下,要用到两个辅助的数据结构: 深度优先遍历--->栈: 广度优先遍历--->队列: 这里以二叉树为例来实现. import java.util.ArrayDeque; public class BinaryTree { static class TreeNode{ int value; TreeNode left; TreeNode rig

存储结构与邻接矩阵，深度优先和广度优先遍历及Java实现

如果看完本篇博客任有不明白的地方,可以去看一下<大话数据结构>的7.4以及7.5,讲得比较易懂,不过是用C实现下面内容来自segmentfault 存储结构要存储一个图,我们知道图既有结点,又有边,对于有权图来说,每条边上还带有权值.常用的图的存储结构主要有以下二种: 邻接矩阵邻接表邻接矩阵我们知道,要表示结点,我们可以用一个一维数组来表示,然而对于结点和结点之间的关系,则无法简单地用一维数组来表示了,我们可以用二维数组来表示,也就是一个矩阵形式的表示方法. 我们假设A是这个二维数组

数据结构之深度优先，广度优先遍历

深度优先和广度优先遍历在树和图中应用最为普遍,思想也类似,因此放到一起来总结. 二叉树的深度优先广度优先遍历: 一棵二叉树(2,(2(3,4),3(4,5))),这是一棵满二叉树,一共有7个节点,根节点2,深度为3 数据结构定义如下: class Node: def __init__(self, value=None, left = None, right = None): self.value = value self.left = left self.right = right 先根遍历 d

二叉树遍历（前序、中序、后序、层次、深度优先、广度优先遍历）

二叉树是一种非常重要的数据结构,很多其它数据结构都是基于二叉树的基础演变而来的.对于二叉树,有深度遍历和广度遍历,深度遍历有前序.中序以及后序三种遍历方法,广度遍历即我们平常所说的层次遍历.因为树的定义本身就是递归定义,因此采用递归的方法去实现树的三种遍历不仅容易理解而且代码很简洁,而对于广度遍历来说,需要其他数据结构的支撑,比如堆了.所以,对于一段代码来说,可读性有时候要比代码本身的效率要重要的多. 四种主要的遍历思想为: 前序遍历:根结点 ---> 左子树 ---> 右子树中序遍历:左子

图的邻接表存储表示，图的深度优先和广度优先遍历

1 #include<stdio.h> 2 #include<stdlib.h> 3 4 #define MAX_VERTAX_SIZE 20 5 #define OK 1 6 #define ERROR 0 7 8 typedef int Status; 9 typedef char ElemType; 10 11 typedef struct EageNode{ 12 int adjacentVertax; 13 struct EageNode* nextAdjacentVer

二叉树的深度优先和广度优先遍历

深度优先搜索算法(Depth First Search),是搜索算法的一种.是沿着树的深度遍历树的节点,尽可能深的搜索树的分支. 当节点v的所有边都己被探寻过,搜索将回溯到发现节点v的那条边的起始节点.这一过程一直进行到已发现从源节点可达的所有节点为止.如果还存在未被发现的节点,则选择其中一个作为源节点并重复以上过程,整个进程反复进行直到所有节点都被访问为止. 二叉树的深度优先遍历和先序遍历结果一样的. 思想是采用栈, 首先将根结点压入栈,如果栈不为空,而后出栈并输出当前结点中值,而后先把右子树

深度优先与广度优先遍历

好吧,别人的教程.写的很详细 http://rsrt.iteye.com/blog/666491

数据结构：图的遍历--深度优先、广度优先

图的遍历:深度优先.广度优先遍历图的遍历是指从图中的某一顶点出发,按照一定的策略访问图中的每一个顶点.当然,每个顶点有且只能被访问一次. 在图的遍历中,深度优先和广度优先是最常使用的两种遍历方式.这两种遍历方式对无向图和有向图都是适用的,并且都是从指定的顶点开始遍历的.先看下两种遍历方式的遍历规则: 深度优先深度优先遍历也叫深度优先搜索(Depth First Search).它的遍历规则:不断地沿着顶点的深度方向遍历.顶点的深度方向是指它的邻接点方向. 具体点,给定一图G=<V,E>,

树的深度优先遍历和广度优先遍历

1 import java.util.ArrayDeque; 2 3 public class BinaryTree { 4 static class TreeNode{ 5 int value; 6 TreeNode left; 7 TreeNode right; 8 9 public TreeNode(int value){ 10 this.value=value; 11 } 12 } 13 14 TreeNode root; 15 16 public BinaryTree(int[] ar