如何将特定结构的JS数组转换为HTML无序列表？

需求说明 #

给定如下结构的Where过滤规则JS数组：

const arr = [
    "&&",
    [
        "==",
        "first",
        "1-1"
    ],
    [
        "&&",
        [
            "==",
            "second1",
            "2-1"
        ],
        [
            "==",
            "second2",
            "2-2"
        ]
    ]
];

需要转换为指定格式的嵌套HTML无序列表：

<ul>
    <li>&amp;&amp;
        <ul>
            <li>first == 1-1</li>
            <li>&amp;&amp;
                <ul>
                    <li>second1 == 2-1</li>
                    <li>second2 == 2-2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

数组固定为[操作符, 条件/子条件]的结构，当前优先实现数组转HTML列表的逻辑，后续需支持反向解析。

实现代码 #

以下是完整的递归实现函数，可生成符合要求的嵌套HTML结构：

function arrayToHTML(arr) {
    // 空数组或非数组直接返回空字符串
    if (!Array.isArray(arr) || arr.length === 0) return '';

    const operator = arr[0];
    const children = arr.slice(1);

    // 生成当前层级的li元素，包含操作符
    let html = `<li>${operator}`;

    // 如果有子节点，生成嵌套的ul
    if (children.length > 0) {
        html += '\n        <ul>';
        // 遍历所有子条件，递归生成HTML
        children.forEach(child => {
            // 普通条件（长度为3的数组，如["==", key, value]）
            if (Array.isArray(child) && child.length === 3 && child[0] === '==') {
                html += `\n            <li>${child[1]} == ${child[2]}</li>`;
            } else {
                // 嵌套的操作符节点，递归生成并处理缩进
                const childHtml = arrayToHTML(child);
                html += '\n            ' + childHtml.replace(/\n/g, '\n            ');
            }
        });
        html += '\n        </ul>';
    }

    html += '\n    </li>';
    // 根节点自动包裹一层ul
    return arr === arguments[0] ? `<ul>\n    ${html.trim()}\n</ul>` : html;
}

// 调用示例
const result = arrayToHTML(arr);
console.log(result);

代码说明 #

1. 递归核心逻辑：通过递归遍历每个节点，区分普通条件节点和嵌套操作符节点
2. 节点类型判断：长度为3且首元素为==的数组是普通条件，直接生成key == value格式的li；否则为嵌套操作符节点，递归处理其内部结构
3. 格式对齐：对嵌套节点的HTML进行缩进替换，保证生成的代码格式与目标示例一致
4. 根节点处理：最外层自动添加<ul>包裹，符合最终的HTML结构要求

反向解析思路（可选） #

后续若要将HTML列表转回原数组结构，可通过遍历DOM节点实现：

• 每个li的文本内容开头为操作符（如&&）
• 该li下的ul子节点对应数组的子元素：
  • 若li为纯文本（如first == 1-1），解析为["==", "first", "1-1"]格式的数组
  • 若li包含嵌套ul，则递归解析为对应的操作符数组结构

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