目录
新文章已发布，根据二叉树创建出dom展示在页面上 JS把二叉树展示在页面上，二叉树转DOM_l煎饼果子的博客-CSDN博客
一、示例
在力扣刷算法时，给出的二叉树示例都是数组形式，如果想在自己的编译器上编写代码，就需要把数组转换为一颗真正的二叉树，这样才能作为输入示例。就算数组中包含null, 也可以自动跳过，不进行创建节点（见下方示例）
初始数组：
构造后：
层序遍历后：
二、层序构造二叉树
利用了队列，不断取出节点又不断放入新节点，直到给每个节点都分配好了子节点为止。当数组中有null时，不会建立新节点（也就是跳过这个null）
JavaScript
/**
* 二叉树节点类，与Leecode的定义方法相同
* val: number 当前节点值
* left: TreeNode 左节点
* right: TreeNode 右节点
*/
class TreeNode {
val;
left;
right;
constructor(val, left, right) {
this.val = (val === undefined ? 0 : val);
this.left = (left === undefined ? null : left);
this.right = (right === undefined ? null : right);
}
}
/**
* 根据层序数组构造二叉树 ，比如 [1,2,3] 变为 根1 左2 右3
* @param arr 传入的数组
* @returns TreeNode 这个树的根节点
*/
const buildTree = (arr) => {
let i = 0; //i每次用完都需要自增1，因为层序构造依赖于数组的索引
let root = new TreeNode(arr[i++]);
let NodeList = [root];
while (NodeList.length) {
let node = NodeList.shift();
if (arr[i] !== null) { //如果是空的就不创建节点
node.left = new TreeNode(arr[i]); //创建左节点
NodeList.push(node.left);
}
i++; //不管是不是空的，i都需要自增
if (i == arr.length)
return root; //如果长度已经够了就返回，免得数组索引溢出
if (arr[i] !== null) { //如果是空的就不创建节点
node.right = new TreeNode(arr[i]); //创建右节点
NodeList.push(node.right);
}
i++; //不管是不是空的，i都需要自增
if (i == arr.length)
return root; //如果长度已经够了就返回，免得数组索引溢出
}
return root;
};
const root1 = buildTree([4, 2, 7, 1, 3]);
console.log(root1);TypeScript
/**
* 二叉树节点类，与Leecode的定义方法相同
* val: number 当前节点值
* left: TreeNode 左节点
* right: TreeNode 右节点
*/
class TreeNode {
val: number
left: TreeNode | null
right: TreeNode | null
constructor(val?: number, left?: TreeNode | null, right?: TreeNode | null) {
this.val = (val === undefined ? 0 : val)
this.left = (left === undefined ? null : left)
this.right = (right === undefined ? null : right)
}
}
/**
* 根据层序数组构造二叉树 ，比如 [1,2,3] 变为 根1 左2 右3
* @param arr 传入的数组
* @returns TreeNode 这个树的根节点
*/
const buildTree = (arr: number[]): TreeNode => {
let i: number = 0 //i每次用完都需要自增1，因为层序构造依赖于数组的索引
let root: TreeNode = new TreeNode(arr[i++])
let NodeList: TreeNode[] = [root]
while (NodeList.length) {
let node: TreeNode = NodeList.shift()
if (arr[i] !== null) {//如果是空的就不创建节点
node.left = new TreeNode(arr[i]) //创建左节点
NodeList.push(node.left)
}
i++//不管是不是空的，i都需要自增
if (i == arr.length) return root //如果长度已经够了就返回，免得数组索引溢出
if (arr[i] !== null) {//如果是空的就不创建节点
node.right = new TreeNode(arr[i]) //创建右节点
NodeList.push(node.right)
}
i++//不管是不是空的，i都需要自增
if (i == arr.length) return root //如果长度已经够了就返回，免得数组索引溢出
}
return root
};
const root1: TreeNode = buildTree([4, 2, 7, 1, 3]);
console.log(root1);三、层序遍历二叉树 迭代法
关于二叉树节点类 TreeNode 的定义，在上面的代码中有
JavaScript
function func(root) {
let res = [];
let queue = []; //辅助队列
if (root)
queue.push(root); //根节点不为空才放入
while (queue.length) {
let len = queue.length; //需要固定长度，因为后面会不断在队列中添加和取出数据
for (let i = 0; i < len; i++) {
let node = queue.shift(); //从队列头部取出
res.push(node.val); //放入结果数组
if (node.left)
queue.push(node.left);
if (node.right)
queue.push(node.right);
}
}
return res;
}TypeScript
function func(root: TreeNode): number[] {
let res: number[] = []
let queue: TreeNode[] = []//辅助队列
if (root) queue.push(root)//根节点不为空才放入
while (queue.length) {
let len = queue.length //需要固定长度，因为后面会不断在队列中添加和取出数据
for (let i = 0; i < len; i++) {
let node: TreeNode = queue.shift() //从队列头部取出
res.push(node.val) //放入结果数组
if (node.left) queue.push(node.left)
if (node.right) queue.push(node.right)
}
}
return res
}四、层序遍历二叉树：保留null版
这个版本会保留空节点，作为null放入结果数组，实现：输入什么数据来生成二叉树，遍历出来的数据就是什么
/** 层序遍历二叉树，输出数组 特化版：保留null */
const outTree = (root) => {
let res = [];
let queue = [];
if (root) {
res.push(root.val);
queue.push(root);
}
let len;
while (queue.length) {
len = queue.length;
// console.log(JSON.parse(JSON.stringify(queue)));
for (let i = 0; i < len; i++) {
let node = queue.shift();
if (node.left)
queue.push(node.left);
res.push(node.left?.val || null); //当前节点的左边没数值就放入null，否则放入左节点值
if (node.right)
queue.push(node.right);
res.push(node.right?.val || null); //当前节点的右边没数值就放入null，否则放入右节点值
}
}
// 最后一层的左右子树虽为空，但是也放入了null，需要删除数组末尾无用的null
// 方法一: 只要是末尾的null都剔除
for (let i = res.length - 1; i >= 0; i--) {
if (res[i] === null)
res.length--; //遇到null就长度-1
else
break; //一旦遇到了不是null的，就立马退出
}
//方法二：根据最后一层的节点个数，剔除 len * 2个null
// res.length -= len * 2 //这个会保留最后一层的null，比如[50, 30, 70, 8, 40, 60]，在最后一层其实是 8 40 60 null，这个方法会保留这个null，上面的不会
return res;
};