树状菜单转一维数组菜单

437 阅读1分钟

题目:

将一个格式为treeMenu = [{children: [{}, {}, {}], name:1, id:1 }, {children:null,name2,id::2}]的树状菜单转为格式为flatMenu = [{name:1,id:1,parentId:null},{}]格式的一维数组。

注释

注:其中 treeMenu中的children结构和外层数组相同,如果没有子菜单,children = null;
flatMenu的parentId为treeMenu的父级ID如果没有父级,即数组的第一层元素,那么parentId为null

场景:

前端希望使用的是treeMenu树状菜单,但是在传菜单给后端的时候,后端希望传过去的是flatMenu的格式。别问我为啥要这样传,为啥不让后端自己转格式,问就是面试题!!!

      // 下面为方法
      let arr = [];
      function transfer(treeMenu, parentId = null) {
        for (let i = 0; i < treeMenu.length; i++) {
          let obj = {
            id: treeMenu[i].id,
            name: treeMenu[i].name,
            parentId,
          };
          arr.push(obj);
          if (treeMenu[i].children === null) {
            continue;
          } else {
            transfer(treeMenu[i].children, treeMenu[i].id);
          }
        }
        return arr;
      }
      // 下面为数组转格式前后的样例
      var menu = transfer(treeMenu);
      console.log(menu); // 
      
       var treeMenu = [
        {
          name: "1",
          id: 1,
          children: [
            {
              name: "1.1",
              id: 1.1,
              children: [
                {
                  name: "1.1.1",
                  id: 1.11,
                  children: null,
                },
              ],
            },
            {
              name: "1.2",
              id: 1.2,
              children: null,
            },
          ],
        },
        {
          name: "2",
          id: 2,
          children: [
            {
              name: "2.1",
              id: 2.1,
              children: null,
            },
            {
              name: "2.2",
              id: 2.2,
              children: null,
            },
          ],
        }
      ];
      //上面为树状菜单样式
      // 下面为转格式后的数组
    //  [
    // {
      //  "id": 1,
       // "name": "1",
      //  "parentId": null
   // },
   // {
   //     "id": 1.1,
   //     "name": "1.1",
   //     "parentId": 1
   // },
   // {
   //     "id": 1.11,
   //     "name": "1.1.1",
   //     "parentId": 1.1
   // },
   // {
   //     "id": 1.2,
    //    "name": "1.2",
   //     "parentId": 1
  //  },
  //  {
   //     "id": 2,
   //     "name": "2",
   //     "parentId": null
   // },
  //  {
   //     "id": 2.1,
   //     "name": "2.1",
   //     "parentId": 2
   // },
   // {
   //     "id": 2.2,
   //     "name": "2.2",
  //      "parentId": 2
  //  }
//]