本文已参与「新人创作礼」活动，一起开启掘金创作之路

本文主要记录了用JavaScript实现数据结构 -- 树，定义树以及深度优先遍历和广度优先遍历。

树

树是一种抽象的分层数据模型，例如前端常见的DOM树：

JavaScript中没有树，但是可以用数组和对象来模拟树。

以虚拟DOM为例：vdom就是JS用数组和对象来模拟的树。

vdom = {
    type: 'div',  
    props: {     
        'id': 'content'
    },
    children: [   
        {
            type: 'ul',
            props: {
                'class': 'list'
            },
            children: {
                {
                    type: 'li',
                    props: '',
                    children: ['选项一']
                }
            }
        }
    ]
}

树的常用操作

定义树

	const tree = {
	    val: 'a',
	    children:[
	        {
	            val: 'b',
	            children:[
	                {
	                    val: 'c',
	                    children:[
	                        {
	                            val: 'd',
	                            children:[]
	                        }
	                    ]
	                },
	                {
	                    val: 'e',
	                    children:[]
	                }
	            ]
	        },
	        {
	            val: 'f',
	            children:[
	                {
	                    val: 'g',
	                    children:[]
	                }
	            ]
	        }
	    ]
	}

深度优先遍历

深度优先遍历就是尽可能深的搜索树的分支。

深度优先遍历就像我们看书一样，一页一页的往后翻看。

深度优先遍历过程

• 访问根节点；
• 再把每个子节点当作根节点进行深度遍历；

代码实现

	//深度优先遍历
	const dfs = (root) => {
	    //console.log(root.val);
	    root.children.forEach(dfs);
	}
	//调用深度优先遍历
	dfs(tree);

广度优先遍历

广度优先遍历就是尽可能访问离根节点（树最顶端的节点）近的节点。

广度优先遍历也像我们看书一样，不过他先看目录和各个章节是什么内容，然后再一页一页的翻看。

广度优先遍历过程

• 新建队列，把根节点入队；
• 把对头出队并访问；
• 把对头的子节点挨个入队；
• 重复前两步；

代码实现

	// 广度优先遍历
	const bfs = (root) => {
	    const q = [root];
	    while(q.length > 0){
	        const n = q.shift();
	        //console.log(n.val);
	        n.children.forEach( child => {
	            q.push(child);
	        } )
	    }
	}
	bfs(tree);

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！