树形数组结构和扁平数组结构的转换

来自自己记录的笔记，关于树形数组结构和扁平数组结构之间的转换。

像菜单、目录等依赖的数据基本都是树形数组结构，如下：

[
    {id: 1, name: '一级菜单A', children: [{
        id: 11,
        name: '二级菜单B',
        children: [...]
    }]},
    {
        id: 2, name: '一级菜单C', children: [...]
    }
]

写个程序mock一下这样的数据：

let $index = 0;
function createMenu(id, limit) {
  const assertHasChild = limit&&Math.random() > 0.5;
  const top = {
      id,
    name: 'name_'+id,
    children: assertHasChild? Array(Math.round(Math.random()*10)).fill(1).map((_, i)=>$index+=i+1)
        .map(_=>createMenu(_, limit-1)) : null
  }
  return top;
}
const menu = createMenu($index, 4).children;

扁平数组结构是咋样的呢？通常树形数组数据放在数据库里都是一条一条存，所以就类似扁平数组结构，如下：

[{id, name, parentId}]

接下来开始转换：

先是树形转扁平：深度优先遍历

function flatMenu(srcMenu) {
  const result = [];
  function fn(menu, parentId = null) {
    menu.forEach(item=>{
      result.push({
        id: item.id,
        name: item.name,
        parentId,
      });
      if(item.children && item.children.length) {
        fn(item.children, item.id);
      }
    })
  }
  fn(srcMenu);
  return result;
}
// 后来想想，还是这样写自己理解起来快一些
function flatMenu(srcMenu) {
  const result = [];
  function transfer(menuItem, parentId = null) {
      result.push({
        id: menuItem.id,
        name: menuItem.name,
        parentId,
      });
      if(menuItem.children && menuItem.children.length) {
        menuItem.children.forEach(c=>transfer(c, menuItem.id))
      }
  }
  srcMenu.forEach(item=>transfer(item))
  return result;
}

再来就是扁平转树形：

function list2Menu(list) {
  const map = {};
  const menu = [];
  for(const item of list) {
    let store = map[item.id];
    if (!store) {
      store = {
        id: item.id,
        name: item.name,
        children: [],
      }
    } else {
      store.name = item.name;
    }
    // 重写回去字典
    map[item.id] = store;
    if(item.parentId) {
      if(map[item.parentId]) {
        map[item.parentId].children.push(store);
      } else {
        map[item.parentId] = {
          id: item.parentId,
          children: [store],
        }
      }
    } else {
      menu.push(store);
    }
  }
  return menu;
}