JavaScript嵌套数组转HTML列表函数报错排查与修正请求

一、修正后的代码实现 #

DOM 操作版本（推荐，更安全） #

function arrayToNestedList(arr) {
  const ul = document.createElement('ul');
  arr.forEach(item => {
    const li = document.createElement('li');
    if (Array.isArray(item)) {
      // 嵌套数组直接作为当前li的子元素插入
      li.appendChild(arrayToNestedList(item));
    } else {
      // 普通元素填充文本内容
      li.textContent = item;
    }
    ul.appendChild(li);
  });
  return ul;
}

// 使用示例
const testArray = [1,2,3,[3.1,3.2],4];
document.body.appendChild(arrayToNestedList(testArray));

HTML 字符串拼接版本（适合快速生成HTML代码） #

function arrayToNestedListStr(arr) {
  let html = '<ul>';
  arr.forEach(item => {
    html += '<li>';
    if (Array.isArray(item)) {
      html += arrayToNestedListStr(item);
    } else {
      html += item;
    }
    html += '</li>';
  });
  html += '</ul>';
  return html;
}

// 使用示例
const testArray = [1,2,3,[3.1,3.2],4];
document.body.innerHTML = arrayToNestedListStr(testArray);

二、空li问题的常见原因 #

你遇到的空li问题，大概率是以下两种错误逻辑导致的：

1. 多余li元素的创建
   处理嵌套数组时，错误地先创建一个空li并添加到父列表，再单独创建新li存放嵌套子列表。比如类似这样的错误代码：

   // 错误示例
   function wrongArrayToList(arr) {
     const ul = document.createElement('ul');
     arr.forEach(item => {
       const li = document.createElement('li');
       ul.appendChild(li); // 先添加空li
       if (Array.isArray(item)) {
         const nestedLi = document.createElement('li');
         nestedLi.appendChild(wrongArrayToList(item));
         ul.appendChild(nestedLi); // 再添加带嵌套列表的li
       } else {
         li.textContent = item;
       }
     });
     return ul;
   }
   

   这种写法会让嵌套数组对应的位置出现一个空li，再跟着一个带子列表的li，直接导致空内容项。

2. 字符串拼接的逻辑漏洞
   如果用字符串拼接生成HTML，若判断数组时的代码顺序错误（比如先闭合li再拼接嵌套列表），会生成<li></li><ul>...</ul>的结构，此时空的li就是问题所在；或者未处理数组中的空值（如undefined、null），直接拼接会导致<li></li>空标签。

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