记一道阿里笔试题

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

题

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('')

总结

做题太慢，还得加油。

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

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