js深度优先和广度优先遍历语法树
Posted caoke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于js深度优先和广度优先遍历语法树的主要内容，如果未能解决你的问题，请参考以下文章