js中将数组解析为无序列表

Question

如何解析类似于以下形式的js数组：

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

以 HTML 无序列表 (ul) 的形式显示：

<ul>
    <li>&&
        <ul>
            <li>first == 1-1</li>
            <li>&&
                <ul>
                    <li>second1 == 2-1</li>
                    <li>second2 == 2-2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Arr 的形式始终为 [操作符、条件/子项]。 正如您所猜测的，我需要一个 UI 来编辑 arr 内容。 Arr 表示 JSON 字符串中“where”过滤器定义的形式。因此，当用户更改列表（在无序列表中添加或删除节点）时，我需要将更改解析回数组，但首先要做的是。 也许有一些图书馆，但我找不到它。

我尝试过这样的递归：

    function arrayToHTML(arr, container) {
     if (!Array.isArray(arr) || arr.length === 0) return
     const operator = arr[0]
     const conditions = arr.slice(1)
     if (operator === '&&') {
      this.arrayToHTML(conditions, container)
     }
    }

Answer 1

一个可能的选择是从数组的其余部分 (

op

) 中取出数组的第一个运算符元素 (

conds

)，然后使用运算符元素构建

<li>

，并在其下方嵌套子元素映射

conds

数组。对于

conds

中的每个数组，您可以检查第二个参数是否是一个数组（表明它是一个嵌套/子条件），如果是，则再次递归地构建您的列表结构。否则，如果第二个参数不是数组，那么您已经达到了基本情况，并且可以构建子/终止

<li>

条件字符串：

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

const generateHTMLAux = ([op, ...conds]) => {
  return `<li>${op}
    <ul>
      ${conds.map(cond => {
        const [first, second, third] = cond;
        return Array.isArray(second)
          ? generateHTMLAux(cond)
          : `<li>${second} ${first} ${third}</li>`;
      }).join('')}
    </ul>
  </li>`;
}
const generateHTML = (arr) => `<ul>${generateHTMLAux(arr)}</ul>`;

const res = generateHTML(arr);
document.body.innerHTML = res;
console.log(res);