前端JavaScript篇之将树状结构转成数组方法有哪些?

目录

  • 将树状结构转成数组方法有哪些?
    • 方法一:递归法
    • 方法二:迭代法(使用栈)


将树状结构转成数组方法有哪些?

将树状结构转成数组有多种方法,以下是两种常见的方法。

方法一:递归法

这种方法使用递归来遍历树的每个节点,并将其转换为数组。具体思路如下:

  1. 定义一个递归函数,该函数接收一个节点作为参数。
  2. 将当前节点加入结果数组。
  3. 如果当前节点有子节点,递归调用函数处理子节点。
  4. 最终返回结果数组。
    前端JavaScript篇之将树状结构转成数组方法有哪些?_第1张图片
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>树到数组的转换-迭代法title>
  head>
  <body>
    <div id="beforeConversion">
      <h2>树状结构(转换前)h2>
      <pre id="treeBefore">pre>
    div>

    <div id="afterConversion">
      <h2>数组结构(转换后)h2>
      <pre id="arrayAfter">pre>
    div>

    <script>
      const treeData = {
        id: 1,
        name: 'Node 1',
        children: [
          {
            id: 2,
            name: 'Node 1.1',
            children: [
              {
                id: 4,
                name: 'Node 1.1.1'
              },
              {
                id: 5,
                name: 'Node 1.1.2'
              }
            ]
          },
          {
            id: 3,
            name: 'Node 1.2'
          }
        ]
      }

      function treeToArrayStack(root) {
        const stack = [root]
        const result = []

        while (stack.length > 0) {
          const node = stack.pop()
          result.push({ ...node })

          if (node.children) {
            stack.push(...node.children.reverse())
            delete result[result.length - 1].children
          }
        }

        return result
      }

      const arrayResultStack = treeToArrayStack(treeData)

      document.getElementById('treeBefore').innerText = JSON.stringify(treeData, null, 2)
      document.getElementById('arrayAfter').innerText = JSON.stringify(arrayResultStack, null, 2)
    script>
  body>
html>

方法二:迭代法(使用栈)

这种方法使用栈数据结构来模拟递归,具体思路如下:

  1. 使用一个栈,将根节点入栈。
  2. 弹出栈顶节点,将其加入结果数组。
  3. 如果栈顶节点有子节点,将子节点按逆序入栈。
  4. 重复步骤2-3,直到栈为空。
    前端JavaScript篇之将树状结构转成数组方法有哪些?_第2张图片
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tree to Array Conversiontitle>
head>
<body>

<div id="beforeConversion">
  <h2>Tree Structure (Before Conversion)h2>
  <pre id="treeBefore">pre>
div>

<div id="afterConversion">
  <h2>Array Structure (After Conversion)h2>
  <pre id="arrayAfter">pre>
div>

<script>
  const treeData = {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 1.1',
        children: [
          {
            id: 4,
            name: 'Node 1.1.1'
          },
          {
            id: 5,
            name: 'Node 1.1.2'
          }
        ]
      },
      {
        id: 3,
        name: 'Node 1.2'
      }
    ]
  };

  function treeToArrayStack(root) {
    const stack = [root];
    const result = [];

    while (stack.length > 0) {
      const node = stack.pop();
      result.push({ ...node });

      if (node.children) {
        stack.push(...node.children.reverse());
        delete result[result.length - 1].children;
      }
    }

    return result;
  }

  const arrayResultStack = treeToArrayStack(treeData);

  document.getElementById('treeBefore').innerText = JSON.stringify(treeData, null, 2);
  document.getElementById('arrayAfter').innerText = JSON.stringify(arrayResultStack, null, 2);
script>

body>
html>

这两种方法都可以将树状结构转成数组,具体选择取决于需求和数据结构。

持续学习总结记录中,回顾一下上面的内容:
将树状结构转成数组方法有哪些?
方法一:递归法
方法二:迭代法(使用栈)

你可能感兴趣的:(JavaScript,知识点,前端,javascript,开发语言)