本文介绍一种纯 JavaScript 递归方案，将形如 ["&&", ["==", "a", "b"], ["&&", ...]] 的嵌套条件数组，精准转换为语义清晰、层级正确的 HTML 结构，适用于动态过滤器 UI 的构建与双向同步。

本文介绍一种纯 javascript 递归方案，将形如 `["&&", ["==", "a", "b"], ["&&", ...]]` 的嵌套条件数组，精准转换为语义清晰、层级正确的 html `

• ` 结构，适用于动态过滤器 ui 的构建与双向同步。

  在构建高级搜索或规则编辑器（如 SQL WHERE 子句的可视化表达）时，常需将结构化逻辑条件（如 &&、||、==）以树形列表形式呈现。给定数组遵循统一模式：每个子数组以操作符（如 "&&"）开头，后跟一个或多个条件项——这些项可能是原子三元组（如 ["==", "key", "value"]），也可能是嵌套的同构子数组。目标是将其渲染为符合 DOM 层级语义的嵌套

  列表，其中操作符作为父
  • 的文本，其子条件作为
    的子项。

    核心思路是递归+解构+类型判断：

    • 使用数组解构 ([op, ...conds]) 提取操作符与剩余条件；
    • 对每个 cond 判断是否为数组：若是，则递归生成
    • + 内嵌
      ；若否（即到达叶节点），则按 "key op value" 格式拼接文本（如 "first == 1-1"）；
    • 所有递归结果通过 .map() 组合，并用 join('') 合并为字符串。

    以下是完整、可直接运行的实现：

    
    Wechat HTML Publisher
    直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
    下载

    const arr = [
      "&&",
      ["==", "first", "1-1"],
      [
        "&&",
        ["==", "second1", "2-1"],
        ["==", "second2", "2-2"]
      ]
    ];
    
    const generateHTMLAux = ([op, ...conds]) => {
      // 叶节点：conds[0] 非数组 → 三元组格式：key op value
      if (conds.length >= 2 && !Array.isArray(conds[0])) {
        return `

  • ${conds[0]} ${op} ${conds[1]}
  `; } // 分支节点：所有 conds 均为数组 → 递归渲染每个子条件 return `
  • ${op}
    ${conds.map(generateHTMLAux).join('\n ')}
  `; }; const generateHTML = (input) => `
  ${generateHTMLAux(input)}
  `; // 使用示例 const htmlOutput = generateHTML(arr); document.body.innerHTML = htmlOutput; console.log(htmlOutput); // 查看生成的 HTML 字符串

  ✅ 关键注意事项：

  • 输入健壮性：实际项目中建议增加校验（如 Array.isArray(input)、input.length > 0、typeof op === 'string'），避免运行时错误；
  • HTML 转义：若 op 或键值含 等特殊字符，需使用 encodeURIComponent 或 DOM API（如 textContent）防止 XSS，当前字符串模板仅适用于可信数据；
  • 双向同步基础：此函数为单向渲染，后续实现“列表变更 → 数组更新”时，可基于 DOM 事件监听
  • 的增删改，并逆向解析 textContent 与嵌套层级；
  • 性能考量：对于超深嵌套（>50 层），可考虑尾递归优化或迭代栈模拟，但常规业务场景无需额外处理。

  该方案轻量、无依赖、语义明确，是构建可编辑逻辑树 UI 的理想起点。

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