将嵌套逻辑数组转换为可编辑的 HTML 无序列表（ul/li）结构-js教程-PHP中文网

将嵌套逻辑数组转换为可编辑的 HTML 无序列表（ul/li）结构

本文介绍如何使用递归函数将表示布尔逻辑条件的嵌套 javascript 数组（如 ["&&", ["==", "a", "b"], ...]）精准渲染为语义化、层级清晰的 html 无序列表，支持后续双向编辑（dom ↔ 数组）扩展。

本文介绍如何使用递归函数将表示布尔逻辑条件的嵌套 javascript 数组（如 ["&&", ["==", "a", "b"], ...]）精准渲染为语义化、层级清晰的 html 无序列表，支持后续双向编辑（dom ↔ 数组）扩展。

在构建动态查询条件编辑器（如可视化 WHERE 子句配置面板）时，常需将结构化的逻辑数组（例如 ["&&", ["==", "name", "John"], ["&&", ["!=", "age", "0"], ["）转化为直观的树形 HTML 列表。该结构天然适合递归处理：每个子数组以操作符（如 "&&"、"=="）开头，后跟一个或多个操作数——若操作数为数组，则代表嵌套子条件；若为字符串，则为原子值。

核心思路是分离操作符与子条件，并根据子项类型分治处理：

若当前子条件（conds[0]）为数组 → 递归生成嵌套；
若为字符串（即 conds = [left, op, right] 形式中的左右值）→ 拼接为终端
，格式为 "left op right"。

以下为健壮、可复用的实现：

const generateHTMLAux = ([op, ...conds]) => {
  // 基础校验：空数组或非数组输入直接返回空字符串
  if (!Array.isArray(conds) || conds.length === 0) return '';

  // 判断首个子项是否为嵌套数组（即存在子条件分支）
  if (Array.isArray(conds[0])) {
    return `

${op}

${conds.map(generateHTMLAux).join('')}

`; } else { // 终止情况：conds 应为 [left, right] 或 [left, op, right]， // 但原始数据约定为 [op, left, right]，故此处需适配：实际传入的是 [left, right]（因 op 已提取） // ⚠️ 注意：原题示例中 arr 结构为 [op, ...subConditions]，且 subConditions 中每个元素自身也是 [op, a, b] 或 [op, ...] // 因此 conds[0] 是完整子数组，而 conds.length > 1 时才可能有多个并列条件（如 && 的多个分支） // 所以更准确的终止逻辑是：当 conds 中所有项均为字符串（非数组）时，按顺序两两配对 // 但题设结构明确：每个非顶层节点必为 [op, a, b] 或 [op, ...subArrays]，因此我们统一按“首项是否为数组”判断 // 故此处 else 分支实际不会触发——因为 conds 元素要么是数组（递归），要么结构非法 // 正确做法：仅当 conds 长度为 2 且二者均为字符串时，才视为原子比较 const [left, right] = conds; return `

${left} ${op} ${right}

`; } }; // 主入口：包裹顶层 ul const generateHTML = (arr) => { if (!Array.isArray(arr) || arr.length '; return `

${generateHTMLAux(arr)}

`; };

✅ 使用示例：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

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

document.body.innerHTML = generateHTML(arr);

⚠️ 注意事项：

该函数假设输入结构严格符合 [operator, ...conditions] 范式，不校验操作符合法性（如 "=="、"&&"），生产环境建议增加 op 白名单校验；
当前实现生成纯字符串 HTML，如需绑定事件（如点击添加/删除节点），应改用 document.createElement 动态构建 DOM 并附加 data-* 属性标记来源索引；
反向解析（DOM → 数组）需遍历
的 textContent 与子结构，提取操作符及子节点，是本方案的自然延伸，可基于 Element.children 和正则匹配 (\S+)\s+(==|!=|&&|\|\|)\s+(\S+) 实现。