记一道阿里笔试题

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

题

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

总结

作题太慢，还得加油。

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

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