实现路由菜单的平铺和还原

最近遇到将菜单数组平铺成一维，后续还需要将一维数组还原成多维，将思路记录下来。

---

前言

接口传递过来了一个菜单数组，但是有很多的层级，需要我将数组转换为一维的数组,这样我们就方便进行判断当前的页面是否符合当前用户的权限，决定用户是否能访问该页面。

后续又有一个接口传递过来了一个一维的数组，我们需要还原成多维的树状结构，方便我们将树状选择框实现。

一、平铺多维数组

这里我们使用递归是最方便的方法，我们只需要根据是否有子数组作为终止的条件。

	const allMenuList = []  //平铺后的数组
    recursionMenu(menuList) {
    
    
      menuList.map((item) => {
    
    
        if (item.children?.length > 0) {
    
    
          this.recursionMenu(item.children)  //如果有子数组就继续递归子数组
        }

        allMenuList.push(item.path) //如果没有子数组就是我们需要的，添加进入最终的数组
      })
    }

二、还原多维数组

这里我们根据数组的条件，每个数组成员都有id，如果有父亲，那么parentId就会有值且是父亲的id。我们根据这个关系，在结合map类型来实现。

const recursionRecords = (list) => {
    
    
  let mapList = new Map(list.map(item => [item.id, item]))		//将数组的每一项都存入map对象中
  const result = []												//最终返回的数组
  list.forEach(e => {
    
    
    if (e.parentId === '-1') {
    
    		//最顶层节点
      result.push(e)				
    } else {
    
    
      const parent = mapList.get(e.parentId)		//找到当前节点的父节点
      parent.children.push(e)						//将当前节点存入父节点的children数组中
    }
  })
  return result
}

这里我们先首先将数组里的每一项都存在一个map中，key为节点id，值就是节点本身，后续我们是可以直接通过id获取到这个节点进行操作的。我们只需要找出最顶层的几个节点然后将它们存入我们新创建的数组中即可。你可能疑问，那如果不是顶层节点怎么办？所以我们就需要用到前面的map对象，将当前节点的父节点获取到，然后将当前节点添加到父节点的children数组即可。因为map对象中保存的对象和数组中保存的对象的内存地址一样，一个发生改变另外一个也会发生改变。

总结

上面的二个应该遇到的概率比较大，所有写个笔记记录一下，可能数据类型不同，但是思路应该都是大致相同的，如果有什么不对的地方，请不吝赐教，相互进步。

要把BOSS打倒就要准备足够的等级。