记一道阿里笔试题

收到阿里巴巴的笔试通知，一共六道题。忐忑的我打开了，遗憾的是两道没做完就到时间了。下面分享下自己做的一道题。

题

let menu = [{ "Id": 1, "ParentId": null, "Sort": 0, "Name": "菜单 1"},
    {"Id": 2, "ParentId": 1, "Sort": 0, "Name": "菜单 1 -1"},
    {"Id": 3, "ParentId": 1, "Sort": 1, "Name": "菜单 1 -2"},
    {"Id": 4, "ParentId": 2, "Sort": 2, "Name": "菜单 1 -1-2"},
    {"Id": 5, "ParentId": 2, "Sort": 1, "Name": "菜单 1 -1-1"},
    {"Id": 6, "ParentId": null, "Sort": 1, "Name": "菜单 2"},
    {"Id": 7, "ParentId": 6, "Sort": 0, "Name": "菜单 2 -1"},
    {"Id": 8, "ParentId": 6, "Sort": 1, "Name": "菜单 2 -2"},
    {"Id": 9, "ParentId": 8, "Sort": 2, "Name": "菜单 2 -2-2"},
    {"Id": 10, "ParentId": 8, "Sort": 1, "Name": "菜单 2 -2-1"},
    {"Id": 11, "ParentId": 10, "Sort": 0, "Name": "菜单 2 -2-1-1"}
]
将上面的数据结果转成
'<ul><li><ul><li><ul><li><a> 菜单 1 -1-1</a></li></ul><ul><li><a> 菜单 1 -1-2</a></li></ul><a> 菜单 1 -1</a></li></ul><ul><li><a> 菜单 1 -2</a></li></ul><a> 菜单 1 </a></li></ul>'
这种格式 

解题思路

这道题考察的只要是递归的用法，首先得把数据结构转化下，转成如下格式

{
    "Id": 1,
    "ParentId": null,
    "Sort": 0,
    "Name": "菜单 1",
    "children": [
      {
        "Id": 2,
        "ParentId": 1,
        "Sort": 0,
        "Name": "菜单 1 -1",
        "children": [
          {
            "Id": 5,
            "ParentId": 2,
            "Sort": 1,
            "Name": "菜单 1 -1-1"
          },
          {
            "Id": 4,
            "ParentId": 2,
            "Sort": 2,
            "Name": "菜单 1 -1-2"
          }
        ]
      },
      {
        "Id": 3,
        "ParentId": 1,
        "Sort": 1,
        "Name": "菜单 1 -2"
      }
    ]
  }

主要用到了递归的思想，具体方法如下

function digui(total, item) {if (!total || total.children === 0) return
    for (let obj of total) {if (obj.Id === item.ParentId) {obj.children = obj.children || []
            // 这里根据 Id 和 ParentId 生成 children 数据
            obj.children.push(item)
            obj.children.sort((a, b) => a.Sort - b.Sort)
        }
        digui(obj.children, item)
    }
}
function genData(menu) {return menu.reduce((total, item, index) => {if (item.ParentId) {digui(total, item)
        } else {total.push(item)
        }
        return total
    }, [])
}

数据转好了，然后转好的数据生成字符串，同样也是用到了递归的方法

function genHtml(item) {
    return `
        <ul>
            <li>
                <a>${item.Name}</a>
                ${(item.children ? item.children.map(_item => genHtml(_item)).join('') :'')}
            </li>
        </ul>
    `
}

最后获取结果

genData(menu).map(genHtml).join('')

总结

做题太慢，还得加油。

请关注公众号漂在北上广深⇗，定期推送优质美文。

看完了先别走，点个赞 ⇓ 啊，赞赏 ⇘ 就更好啦！