如何在JavaScript中从嵌套数组生成独立<li>元素？

原代码的问题 #

1. 你在循环里固定取了spellingList[1]，也就是那个子数组，而原数组长度是4，所以会重复生成4个内容为a,b,c的
3. 没有判断当前元素是不是数组，直接把数组转成文本节点，自然就变成逗号分隔的字符串了

修正后的完整实现 #

如果想要处理整个数组（包括Word1、Word2这些普通元素，同时把嵌套数组的每个元素单独生成

var spellingList = ["Word1", ["a", "b", "c"], "Word2", "Word3"]; 
// 提前获取列表元素，避免循环里反复查询DOM，提升性能
var displaySpellList = document.getElementById("listSpelling"); 

for (var i = 0; i < spellingList.length; i++) { 
    var currentItem = spellingList[i];
    
    // 判断当前项是不是数组
    if (Array.isArray(currentItem)) {
        // 遍历子数组，每个元素单独生成<li>
        currentItem.forEach(function(subItem) {
            var newLI = document.createElement("li");
            newLI.textContent = subItem;
            displaySpellList.appendChild(newLI);
        });
    } else {
        // 普通字符串直接生成<li>
        var newLI = document.createElement("li");
        newLI.textContent = currentItem;
        displaySpellList.appendChild(newLI);
    }
}

如果你只需要生成a、b、c的

#

要是你只想处理嵌套数组里的内容，忽略Word1这些元素，那代码可以更简单：

var spellingList = ["Word1", ["a", "b", "c"], "Word2", "Word3"]; 
var displaySpellList = document.getElementById("listSpelling");
// 直接取出嵌套的子数组
var subItems = spellingList[1];

// 遍历子数组生成独立<li>
subItems.forEach(function(item) {
    var newLI = document.createElement("li");
    newLI.textContent = item;
    displaySpellList.appendChild(newLI);
});

优化小细节 #

• 把DOM元素查询移到循环外面，减少不必要的DOM操作，让代码更高效
• 用textContent替代createTextNode+appendChild，代码更简洁易读
• 用Array.isArray准确判断元素类型，避免出错

运行后你就能得到想要的：

<li>a</li>
<li>b</li>
<li>c</li>

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