JavaScript入门作业：如何从嵌套数组生成<ul>列表？

嘿，你已经搞定普通数组转有序列表的部分啦，做得很棒！现在要处理嵌套数组生成无序列表，核心思路是用递归来应对多层嵌套的结构——毕竟我们没法提前知道数组会嵌套多少层，递归能自动处理每一层的内容。

先给你看完整的实现代码，之后我再拆解细节：

// 示例嵌套数组（你可以替换成自己的数组）
var nestedFruits = [
  "苹果",
  ["香蕉", "芭蕉"],
  ["橙子", ["脐橙", "血橙"], "柚子"],
  "草莓"
];

window.onload = function() {
  // 递归生成嵌套列表的核心函数
  function generateNestedUl(arr) {
    let ulHtml = "<ul>";
    for (let item of arr) {
      if (Array.isArray(item)) {
        // 如果当前元素是数组，递归生成子列表并包裹在<li>中
        ulHtml += `<li>${generateNestedUl(item)}</li>`;
      } else {
        // 普通文本元素直接生成<li>
        ulHtml += `<li>${item}</li>`;
      }
    }
    ulHtml += "</ul>";
    return ulHtml;
  }

  // 生成嵌套列表HTML并插入到页面容器
  const ulHtml = generateNestedUl(nestedFruits);
  document.querySelector("#ulContainer").innerHTML = ulHtml;
};

代码逻辑拆解： #

• 递归函数generateNestedUl：这是实现嵌套列表的关键。它接收一个数组，遍历每个元素：
  • 若元素是子数组，就递归调用自身生成对应的子<ul>，再把这个子列表包裹在<li>里；
  • 若元素是普通字符串，直接生成<li>元素即可。
• 页面加载逻辑：和你之前写<ol>的思路一致，页面加载完成后调用递归函数生成完整的HTML结构，再插入到指定容器（这里假设你有个id为ulContainer的元素）。

和你原有代码的衔接： #

你之前的<ol>实现是用for循环遍历普通数组，而嵌套场景因为存在多层结构，递归是最简洁的处理方式——不用写多层嵌套的for循环，不管数组嵌套多少层都能自动处理。如果你的嵌套数组需要排序，也可以在调用递归函数前先处理排序（比如写一个递归排序函数来处理每一层的子数组）。

内容的提问来源于stack exchange，提问作者mchd