如何从平面列表构建嵌套的HTML列表

const flatList = [
  { id: 1, name: 'Item 1', parentId: null },
  { id: 2, name: 'Item 1.1', parentId: 1 },
  { id: 3, name: 'Item 1.2', parentId: 1 },
  { id: 4, name: 'Item 1.2.1', parentId: 3 },
  { id: 5, name: 'Item 2', parentId: null },
  { id: 6, name: 'Item 2.1', parentId: 5 },
];

function buildNestedList(flatList, parentId = null) {
  const nestedList = [];
  
  // 遍历平面列表
  for (const item of flatList) {
    // 如果当前项的父级ID与传入的父级ID相同，则将其添加到嵌套列表中
    if (item.parentId === parentId) {
      // 递归调用buildNestedList函数，以当前项的ID作为父级ID，构建子级嵌套列表
      const children = buildNestedList(flatList, item.id);
      
      // 将当前项添加到嵌套列表中，并将子级嵌套列表作为其子项
      nestedList.push({
        id: item.id,
        name: item.name,
        children: children.length > 0 ? children : null,
      });
    }
  }
  
  return nestedList;
}

const nestedList = buildNestedList(flatList);

// 递归遍历嵌套列表，生成HTML列表
function generateHTMLList(nestedList) {
  let html = '<ul>';
  
  for (const item of nestedList) {
    html += `<li>${item.name}`;
    
    // 如果当前项有子级嵌套列表，则递归调用generateHTMLList函数生成子级HTML列表
    if (item.children) {
      html += generateHTMLList(item.children);
    }
    
    html += '</li>';
  }
  
  html += '</ul>';
  
  return html;
}

const htmlList = generateHTMLList(nestedList);
console.log(htmlList);