JavaScript递归算法生成树形菜单

生成树形菜单是前端开发中很常见的需求，而其中最常用的方法就是 JavaScript 递归算法。下面是一个完整的攻略：

1. 定义数据结构

在开始编写算法之前，我们需要确定菜单的数据结构。通常情况下，一棵树形结构的菜单包含以下属性：

• id：节点的唯一标识符
• name：节点的名称
• children：子节点，也是一个数组，里面存放着若干个和父节点的结构相同的节点

利用该数据结构，我们可以构建出一棵如下的树形结构：

[
  {
    "id": 1,
    "name": "Home",
    "children": [
      {
        "id": 2,
        "name": "Products",
        "children": [
          {
            "id": 3,
            "name": "Mobile Phones",
            "children": [
              {
                "id": 4,
                "name": "iPhone 13"
              },
              {
                "id": 5,
                "name": "Samsung Galaxy S21"
              }
            ]
          },
          {
            "id": 6,
            "name": "Laptops",
            "children": [
              {
                "id": 7,
                "name": "MacBook Pro"
              },
              {
                "id": 8,
                "name": "Dell XPS 13"
              }
            ]
          }
        ]
      },
      {
        "id": 9,
        "name": "About Us"
      }
    ]
  }
]

2. 编写递归算法

接下来，我们开始编写 JavaScript 的递归算法。该算法的思路如下：

1. 遍历树形结构中的每个节点
2. 对于当前节点，创建一个新的菜单项
3. 如果该节点包含子节点，则递归调用函数，将子节点作为新菜单项的子菜单，并添加到新菜单项的 children 属性中
4. 将当前菜单项添加到菜单数组中
5. 返回菜单数组

以下是具体实现：

function generateMenu(menuData) {
  let menu = [];
  for (let i = 0; i < menuData.length; i++) {
    let menuItem = {
      id: menuData[i].id,
      name: menuData[i].name
    };
    if (menuData[i].children) {
      menuItem.children = generateMenu(menuData[i].children);
    }
    menu.push(menuItem);
  }
  return menu;
}

在该算法中，我们首先定义了一个空数组 menu。接着，遍历树形结构中的每个节点，对于当前节点，创建一个新的菜单项 menuItem，然后判断该节点是否包含子节点。如果包含子节点，我们就递归调用该函数，并将得到的菜单项添加到当前菜单项的 children 属性中。最后，将当前菜单项添加到菜单数组中并返回菜单数组。

3. 嵌套列表

该算法生成的菜单可以很容易地转换成 HTML 代码。下面是一个嵌套列表的示例：

<ul>
  <li>
    <a href="#">Home</a>
    <ul>
      <li>
        <a href="#">Products</a>
        <ul>
          <li>
            <a href="#">Mobile Phones</a>
            <ul>
              <li><a href="#">iPhone 13</a></li>
              <li><a href="#">Samsung Galaxy S21</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Laptops</a>
            <ul>
              <li><a href="#">MacBook Pro</a></li>
              <li><a href="#">Dell XPS 13</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">About Us</a></li>
    </ul>
  </li>
</ul>

4. Vue 组件

除了生成 HTML 代码，我们还可以将该算法封装成一个 Vue 组件，方便在 Vue 项目中使用。下面是一个示例：

<template>
  <ul>
    <li v-for="m in getMenuItems()" :key="m.id">
      <a :href="'#' + m.id">{{ m.name }}</a>
      <TreeMenu :menu-data="m.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "TreeMenu",
  props: ["menuData"],
  methods: {
    getMenuItems() {
      if (!this.menuData) {
        return [];
      }
      return generateMenu(this.menuData);
    }
  },
  components: {
    TreeMenu: () => import("./TreeMenu.vue")
  }
};
</script>

在这个组件中，我们首先定义了一个 menuData 属性，接着使用一个 getMenuItems 方法生成菜单，并使用 v-for 指令展示每个菜单项。最后，我们将组件本身再次实例化，形成递归嵌套。该组件在使用时只需要传入菜单数据即可：

<template>
  <div>
    <TreeMenu :menu-data="menuData" />
  </div>
</template>

<script>
import TreeMenu from "./TreeMenu.vue";

export default {
  name: "App",
  data() {
    return {
      menuData: [
        {
          id: 1,
          name: "Home",
          children: [
            {
              id: 2,
              name: "Products",
              children: [
                {
                  id: 3,
                  name: "Mobile Phones",
                  children: [
                    {
                      id: 4,
                      name: "iPhone 13"
                    },
                    {
                      id: 5,
                      name: "Samsung Galaxy S21"
                    }
                  ]
                },
                {
                  id: 6,
                  name: "Laptops",
                  children: [
                    {
                      id: 7,
                      name: "MacBook Pro"
                    },
                    {
                      id: 8,
                      name: "Dell XPS 13"
                    }
                  ]
                }
              ]
            },
            {
              id: 9,
              name: "About Us"
            }
          ]
        }
      ]
    };
  },
  components: {
    TreeMenu
  }
};
</script>

以上就是使用 JavaScript 递归算法生成树形菜单的完整攻略，包含了数据结构的定义、递归算法的实现以及 HTML 和 Vue 组件的示例。