系统的菜单（tree）与数组之间的转换

闹闹没有闹

已于 2023-02-17 18:51:22 修改

阅读量109

点赞数

分类专栏：小demo JavaScript javascript 的小技巧文章标签： javascript vue.js 开发语言

于 2022-12-14 18:30:47 首次发布

本文链接：https://blog.csdn.net/qq_41893686/article/details/128320299

版权

小demo 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

javascript 的小技巧

14 篇文章 0 订阅

订阅专栏

运行结果图：

在这里插入图片描述


<!--
 * @Description: 
 * @Autor: mqq
 * @Date: 2022-12-04 12:15:51
 * @LastEditors:
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      let treeData = [
        {
          id: 1,
          name: "部门1",
          pid: 0,
        },
        {
          id: 2,
          name: "部门2",
          pid: 1,
        },
        {
          id: 22,
          name: "部门22",
          pid: 0,
        },
        {
          id: 23,
          name: "部门23",
          pid: 0,
        },
        {
          id: 3,
          name: "部门3",
          pid: 2,
        },
        {
          id: 4,
          name: "部门4",
          pid: 3,
        },
        {
          id: 5,
          name: "部门5",
          pid: 4,
        },
        {
          id: 6,
          name: "部门6",
          pid: 5,
        },
      ];

      /**
       * @description: 数组转换成tree
       * @param {*} arr
       * @param {*} pid
       * @return {*}
       */

      function formatTree(arr, id = 0) {
        let newArr = [];
        arr.forEach((item) => {
          if (item.pid == id) {
            item.children = formatTree(arr, item.id);
            newArr.push({
              ...item,
            });
          }
        });
        return newArr;
      }

      let tree = formatTree(treeData, 0);

      /**
       * @description: tree 转换成 打平的数组
       * @param {*} tree
       * @return {*}
       */
      function flatTree(tree) {
        let treeData = [];
        tree.forEach((item) => {
          if (item.children.length) {
            treeData.push(...flatTree(item.children));
          }
          delete item.children;
          treeData.push(item);
        });
        return treeData;
      }

      
      console.log(formatTree(treeData, 0));
      console.log(flatTree(tree));


    </script>
  </body>
</html>