記一道阿里筆試題

收到阿里巴巴的筆試通知，一共六道題。忐忑的我打開了，遺憾的是兩道沒作完就到時間了。下面分享下本身作的一道題。

題

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

總結

作題太慢，還得加油。

請關注公衆號漂在北上廣深⇗，按期推送優質美文。

看完了先別走，點個贊 ⇓ 啊，讚揚 ⇘ 就更好啦！