以美学观重新认识Javascript二叉树层序遍历

2024-02-06 16:32:33

二叉树的层次遍历

二叉树的层次遍历是一种广度优先遍历，它按照二叉树的层次逐层访问节点。

具体步骤如下：

创建一个队列，并将根节点入队。
循环以下步骤，直到队列为空：
- 将队列中的所有节点出队，并访问它们。
- 将每个节点的左右子节点入队。

function levelOrder(root) {
  if (root === null) {
    return [];
  }

  const queue = [root];
  const result = [];

  while (queue.length > 0) {
    const levelSize = queue.length;
    const levelValues = [];

    for (let i = 0; i < levelSize; i++) {
      const node = queue.shift();
      levelValues.push(node.val);

      if (node.left !== null) {
        queue.push(node.left);
      }

      if (node.right !== null) {
        queue.push(node.right);
      }
    }

    result.push(levelValues);
  }

  return result;
}

可视化层序遍历

为了让层序遍历更具美感，我们可以使用JavaScript实现一个可视化层序遍历，让二叉树的层次结构一目了然。

function visualizeLevelOrder(root) {
  if (root === null) {
    return [];
  }

  const queue = [root];
  const result = [];

  while (queue.length > 0) {
    const levelSize = queue.length;
    const levelValues = [];

    for (let i = 0; i < levelSize; i++) {
      const node = queue.shift();
      levelValues.push(node.val);

      if (node.left !== null) {
        queue.push(node.left);
      }

      if (node.right !== null) {
        queue.push(node.right);
      }
    }

    result.push(levelValues);

    // 将每一层节点的可视化结果添加到HTML中
    const levelDiv = document.createElement("div");
    levelDiv.classList.add("level");

    for (let i = 0; i < levelValues.length; i++) {
      const nodeDiv = document.createElement("div");
      nodeDiv.classList.add("node");
      nodeDiv.innerHTML = levelValues[i];

      levelDiv.appendChild(nodeDiv);
    }

    document.body.appendChild(levelDiv);
  }

  return result;
}