学习二叉树数据结构的笔记
二叉树:
- 树是计算机科学中经常用到的一种数据结构。树是一种非线性的数据结构,以分层的方式
存储数据。树被用来存储具有层级关系的数据,比如文件系统中的文件;树还被用来存储
有序列表。 - 二叉树是一种特殊的树,它的子节点个数不超过两个。
- 二叉树的插删改很快
代码定义
Node:节点类
class Node{
constructor(data,left,right){
this.data = data;
this.left = left;
this.right =right;
}
show(){
return this.data;
}
}
BST 二叉树
class BST{
constructor(){
this.root = null;
this.rootArr = null; //用来记录tree的arr形式
}
//插入节点
insert(data){
let n = new Node(data,null,null);
if(this.root == null) {this.root = n;}
else{
let current = this.root;
let parent;
while(true){
parent = current;
if(data<current.data){
current = current.left;
if(current == null) {
parent.left = n;break
}
}else{
current = current.right;
if(current == null){
parent.right = n;break;
}
}
}
}
}
//展示bst的arr结构
show(){
this.inOrder(this.root)
return this.rootArr;
}
//tree->arr
inOrder(node){
if(node != null){
this.inOrder(node.left);
this.rootArr?'':this.rootArr=[];
this.rootArr.push(node.show());
this.inOrder(node.right);
}
}
}
展示:
<h1 id = 'show'></h1>
function main(){
let BSTObj = new BST();
new Array(20).fill('').forEach(element => {
BSTObj.insert(parseInt(Math.random()*100))
});
let _html = document.getElementById('show')
_html.innerHTML = BSTObj.show().toString();
}
main();
用数组的形式去展示 感觉好low,low ,low ,有B格,咱得用图像 ,那怎么把这种结构用html和css在界面上展示出来呢。咱不会咱可以去膜拜一下大佬:用 DOM 与 CSS 展示二叉树
膜拜一下总会有收获的: 还摸了3张图(0……0)
css 收获
/* 节点样式 */
b{
display: inline-block;
width: 20px;
background-color: aqua;
border-radius: 50%;
padding: 5px
}
div.tree {
display: flex;
flex-wrap: wrap;/*span 需要独占一行,所以此 flex 布局必须要折行显示 */
align-items: flex-start;
}
div.tree > span {
width: 100%;
text-align: center;
padding-bottom: 3em;
background-image: url(./img/both.svg);
background-repeat: no-repeat;
}
/* 巧妙地子节点位置放置 */
.tree > .tree {
width: 50%;
}
/* 只有一个右节点使用 */
div.just_only_right{
flex-direction:row-reverse; /*改变主轴的方向 */
}
div.just_only_right > span{
background-image: url(./img/right.svg);
}
/* 只有一个左节点使用 */
div.just_only_left > span {
background-image: url(./img/left.svg);
}
div.no_child_node > span {
background-image: none;
}
/* 左右子节点单独设置样式 */
div.tree > .nleft {
width: 50%;
color: brown;
}
div.tree > .nright {
width: 50%;
color: aquamarine;
}
js收获
//展示bst的tree结构
showTree2Html(root){
if(root){
let onlyLeft = (root.left && !root.right)
let onlyRight = (!root.left && root.right)
let noSubTree = !root.left && !root.right
return `
<div id='rootNode' class="
tree
${noSubTree?'no_child_node':''}
${onlyLeft?'just_only_left':''}
${onlyRight?'just_only_right':''}
">
<span> <b>${root.data}</b> </span>
${root.left?this.showTree2Html(root.left):''}
${root.right?this.showTree2Html(root.right):''}
</div>
`
}
}
成果测试
function main(){
let BSTObj = new BST();
new Array(20).fill('').forEach(element => {
BSTObj.insert(parseInt(Math.random()*100))
});
let _html = document.getElementById('show')
let _body = document.body;
//DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象
let _treedoc = new DOMParser().parseFromString(BSTObj.showTree2Html(BSTObj.root), 'text/html')
let _tree = _treedoc.getElementById('rootNode')
_html.innerHTML = BSTObj.show().toString();
_body.appendChild(_tree)
}
main();
效果
此过程额外收获
将HTML字符转换为DOM节点并动态添加到文档中
//DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象。
let _body = document.body;
//BSTObj.showTree2Html(BSTObj.root) 返回一个html字符模板:<div>ada</div>
let _treedoc = new DOMParser().parseFromString(BSTObj.showTree2Html(BSTObj.root), 'text/html')
let _tree = _treedoc.getElementById('rootNode')
_body.appendChild(_tree)
拿捏
完整例子
<style>
/* 节点样式 */
b{
display: inline-block;
width: 20px;
background-color: aqua;
border-radius: 50%;
padding: 5px
}
div.tree {
display: flex;
flex-wrap: wrap;/*span 需要独占一行,所以此 flex 布局必须要折行显示 */
align-items: flex-start;
}
div.tree > span {
width: 100%;
text-align: center;
padding-bottom: 3em;
background-image: url(./img/both.svg);
background-repeat: no-repeat;
}
/* 巧妙地子节点位置放置 */
.tree > .tree {
width: 50%;
}
/* 只有一个右节点使用 */
div.just_only_right{
flex-direction:row-reverse; /*改变主轴的方向 */
}
div.just_only_right > span{
background-image: url(./img/right.svg);
}
/* 只有一个左节点使用 */
div.just_only_left > span {
background-image: url(./img/left.svg);
}
div.no_child_node > span {
background-image: none;
}
/* 左右子节点单独设置样式 */
div.tree > .nleft {
width: 50%;
color: brown;
}
div.tree > .nright {
width: 50%;
color: aquamarine;
}
</style>
<body>
<h1 id = 'show'></h1>
<script>
// 节点
class Node{
constructor(data,left,right){
this.data = data;
this.left = left;
this.right =right;
}
show(){
return this.data;
}
}
//二叉树
class BST{
constructor(){
this.root = null;
this.rootArr = null;
}
insert(data){
let n = new Node(data,null,null);
if(this.root == null) {this.root = n;}
else{
let current = this.root;
let parent;
while(true){
parent = current;
if(data<current.data){
current = current.left;
if(current == null) {
parent.left = n;break
}
}else{
current = current.right;
if(current == null){
parent.right = n;break;
}
}
}
}
}
//展示bst的arr结构
show(){
this.inOrder(this.root)
return this.rootArr;
}
inOrder(node){
if(node != null){
this.inOrder(node.left);
this.rootArr?'':this.rootArr=[];
this.rootArr.push(node.show());
this.inOrder(node.right);
}
}
//展示bst的tree结构
showTree2Html(root){
if(root){
let onlyLeft = (root.left && !root.right)
let onlyRight = (!root.left && root.right)
let noSubTree = !root.left && !root.right
return `
<div id='rootNode' class="
tree
${noSubTree?'no_child_node':''}
${onlyLeft?'just_only_left':''}
${onlyRight?'just_only_right':''}
">
<span> <b>${root.data}</b> </span>
${root.left?this.showTree2Html(root.left):''}
${root.right?this.showTree2Html(root.right):''}
</div>
`
}
}
}
function main(){
let BSTObj = new BST();
new Array(20).fill('').forEach(element => {
BSTObj.insert(parseInt(Math.random()*100))
});
let _html = document.getElementById('show')
let _body = document.body;
//DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象
let _treedoc = new DOMParser().parseFromString(BSTObj.showTree2Html(BSTObj.root), 'text/html')
let _tree = _treedoc.getElementById('rootNode')
_html.innerHTML = BSTObj.show().toString();
_body.appendChild(_tree)
}
main();
</script>
</body>