本文介绍如何使用递归 JavaScript 函数，将形如 ["&&", ["==", "a", "b"], ["&&", ...]] 的嵌套条件数组，动态渲染为语义清晰、层级准确的嵌套 HTML 结构，适用于构建可视化查询条件编辑器。

本文介绍如何使用递归 javascript 函数，将形如 `["&&", ["==", "a", "b"], ["&&", ...]]` 的嵌套条件数组，动态渲染为语义清晰、层级准确的嵌套 `

• ` html 结构，适用于构建可视化查询条件编辑器。

  要将深度嵌套的逻辑条件数组（如 SQL WHERE 子句的 JSON 表达）转化为直观、可交互的 UI 列表，核心在于识别操作符与子条件的结构规律：每个子数组均以操作符（如 "&&"、"=="）开头，后跟一个或多个操作数——这些操作数可能是原始值（字符串），也可能是另一个同构数组（即子条件）。因此，我们采用结构化递归 + 模板字符串的方式实现渲染。

  以下是一个健壮、简洁且可读性强的实现：

  const arr = [
    "&&",
    ["==", "first", "1-1"],
    ["&&", ["==", "second1", "2-1"], ["==", "second2", "2-2"]]
  ];
  
  const generateHTMLAux = ([op, ...conds]) => {
    // 基础校验：空数组或非法结构直接返回空 li
    if (!Array.isArray(conds) || conds.length === 0) {
      return `<li>${op}</li>`;
    }
  
    // 若第一个子项是数组 → 当前为复合节点（如 ["&&", [...], [...]]）
    if (Array.isArray(conds[0])) {
      return `<li>${op}
        <ul>
          ${conds.map(generateHTMLAux).join('')}
        </ul>
      </li>`;
    }
  
    // 否则为叶子节点：形如 ["==", "key", "value"] → 渲染为 "key == value"
    const [left, right] = conds;
    return `<li>${left} ${op} ${right}</li>`;
  };
  
  const generateHTML = (arr) => `<ul>${generateHTMLAux(arr)}</ul>`;
  
  // 使用示例
  const htmlOutput = generateHTML(arr);
  document.body.innerHTML = htmlOutput;
  console.log(htmlOutput); // 可在控制台查看生成的 HTML 字符串

  ✅ 关键设计说明：

  

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

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

  下载
  • 使用参数解构 ([op, ...conds]) 直观分离操作符与子条件，避免手动索引错误；
  • 通过 Array.isArray(conds[0]) 判断是否进入递归分支，精准匹配嵌套结构；
  • 叶子节点统一按 left op right 格式渲染（支持 "==", "!=", ">", "in" 等二元操作符），便于后续双向同步（编辑 <li> 内容后反向解析回数组）；
  • 所有 HTML 生成均为纯函数、无副作用，利于单元测试与 SSR 兼容。

  ⚠️ 注意事项：

  立即学习“前端免费学习笔记（深入）”；

  • 当前实现假设输入结构始终合法（即每个数组至少含 1 个元素，操作符后紧跟有效子项）。生产环境建议增加 if (!arr || !Array.isArray(arr) || arr.length 等前置校验；
  • 若需支持一元操作符（如 "!", "exists"），可扩展判断逻辑，例如检查 conds.length === 1 && !Array.isArray(conds[0])；
  • 后续实现「列表编辑→数组还原」时，推荐为每个 <li> 添加 data-path 或 data-index 属性，结合事件委托精准定位修改位置。

  该方案无需第三方库，轻量、可控、易于扩展，是构建动态查询条件 UI 的理想起点。