本文介绍如何使用递归 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 `

• ${op}
`; } // 若第一个子项是数组 → 当前为复合节点（如 ["&&", [...], [...]]） if (Array.isArray(conds[0])) { return `
• ${op}
  ${conds.map(generateHTMLAux).join('')}
`; } // 否则为叶子节点：形如 ["==", "key", "value"] → 渲染为 "key == value" const [left, right] = conds; return `
• ${left} ${op} ${right}
`; }; const generateHTML = (arr) => `
${generateHTMLAux(arr)}
`; // 使用示例 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" 等二元操作符），便于后续双向同步（编辑
• 内容后反向解析回数组）；
• 所有 HTML 生成均为纯函数、无副作用，利于单元测试与 SSR 兼容。

⚠️ 注意事项：

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！