在前端開發中，我們經常會遇到需要生成一層菜單的情況，而json拼接就是實現這一功能的重要方法之一。

const menuData = [
{
id: '1',
name: '菜單1',
children: [
{
id: '1-1',
name: '子菜單1-1',
url: '/menu/1-1'
},
{
id: '1-2',
name: '子菜單1-2',
url: '/menu/1-2'
}
]
},
{
id: '2',
name: '菜單2',
url: '/menu/2'
}
];
const renderMenu = (data) => {
let menuHtml = '';
data.forEach(item => {
if (item.children) {
menuHtml += `<li>${item.name}<ul>${renderMenu(item.children)}</ul></li>`;
} else {
menuHtml += `<li><a href="${item.url}">${item.name}</a></li>`
}
});
return menuHtml;
}
const menu = document.querySelector('.menu');
if (menu) {
menu.innerHTML = renderMenu(menuData);
}

以上代碼通過定義一個menuData數組，來模擬菜單數據。然后通過定義一個renderMenu函數，利用遞歸的方式生成菜單的html，當菜單項有子菜單時，遞歸調用renderMenu函數；當菜單項沒有子菜單時，則直接輸出菜單項的名稱和鏈接。最后，通過querySelector獲取menu元素，并將生成的菜單html插入到menu元素中，以在頁面中顯示生成的菜單。