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

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

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

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

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

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

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

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  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 `<li>${conds[0]} ${op} ${conds[1]}</li>`;
    }
    // 分支节点：所有 conds 均为数组 → 递归渲染每个子条件
    return `<li>${op}
      <ul>
        ${conds.map(generateHTMLAux).join('\n      ')}
      </ul>
    </li>`;
  };
  
  const generateHTML = (input) => `<ul>${generateHTMLAux(input)}</ul>`;
  
  // 使用示例
  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 事件监听 <li> 的增删改，并逆向解析 textContent 与嵌套层级；
  • 性能考量：对于超深嵌套（>50 层），可考虑尾递归优化或迭代栈模拟，但常规业务场景无需额外处理。

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