vue项目如何将多层嵌套的数组转换为一层json串
比如将如下数据转换为一层json串

testArr: {
        index: "0",
        agree: "and",
        children: [
          {
            index: "1",
            name: "name1",
          },
          {
            index: "2",
            name: "name2",
          },
          {
            index: "3",
            agree: "or",
            children: [
              {
                index: "3_1",
                name: "name3_1",
              },
              {
                index: "3_2",
                name: "name3_2",
              },
            ],
          },
          {
            index: "4",
            agree: "and",
            children: [
              {
                index: "4_1",
                name: "name4_1",
              },
              {
                index: "4_2",
                name: "name4_2",
                agree: "or",
                children: [
                  {
                    index: "4_2_2",
                    name: "name4_2_2",
                  },
                  {
                    index: "4_2_1",
                    name: "name4_2_1",
                  },
                ],
              },
              {
                index: "4_3",
                name: "name4_3",
              },
            ],
          },
          {
            index: "5",
            name: "name5",
          },
          {
            index: "6",
            agree: "or",
            children: [
              {
                index: "6_1",
                name: "name6_1",
              },
              {
                index: "6_2",
                name: "name6_2",
              },
            ],
          },
          {
            index: "7",
            name: "name7",
          },
        ],
      },

输出为：

name1 and name2 and (name3_1 or name3_2) and (name4_1 and (name4_2_2 or name4_2_1) and name4_3) and name5 and (name6_1 or name6_2)

完整代码：

<template>
  <div><el-button @click="testClick">测试</el-button></div>
</template>

<script>
export default {
  name: "PdfView",
  components: {},
  data() {
    return {
      testArr: {
        index: "0",
        agree: "and",
        children: [
          {
            index: "1",
            name: "name1",
          },
          {
            index: "2",
            name: "name2",
          },
          {
            index: "3",
            agree: "or",
            children: [
              {
                index: "3_1",
                name: "name3_1",
              },
              {
                index: "3_2",
                name: "name3_2",
              },
            ],
          },
          {
            index: "4",
            agree: "and",
            children: [
              {
                index: "4_1",
                name: "name4_1",
              },
              {
                index: "4_2",
                name: "name4_2",
                agree: "or",
                children: [
                  {
                    index: "4_2_2",
                    name: "name4_2_2",
                  },
                  {
                    index: "4_2_1",
                    name: "name4_2_1",
                  },
                ],
              },
              {
                index: "4_3",
                name: "name4_3",
              },
            ],
          },
          {
            index: "5",
            name: "name5",
          },
          {
            index: "6",
            agree: "or",
            children: [
              {
                index: "6_1",
                name: "name6_1",
              },
              {
                index: "6_2",
                name: "name6_2",
              },
            ],
          },
          {
            index: "7",
            name: "name7",
          },
        ],
      },
      testArrNew: "",
    };
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    testClick() {
      console.log(this.handleArr(this.testArr.children, this.testArr.agree));
    },
    // 将多层数组拼接为一层，如下：
    // name1 and name2 and (name3_1 or name3_2) and (name4_1 and (name4_2_2 or name4_2_1) and name4_3) and name5 and (name6_1 or name6_2)
    handleArr(arr, agree) {
      let list = arr;
      list.forEach((item, index) => {
        if (Array.isArray(item.children)) {
          // 轮询有children，先加上(，如name1 and name2 and (
          this.testArrNew = this.testArrNew + " " + agree + " " + "(";
          this.handleArr(item.children, item.agree);
        } else {
          if (index == list.length - 1) {
            // 轮询结束，加上)，除了第一层数据
            let linkName = ~item.index.indexOf("_") ? ")" : "";
            this.testArrNew =
              this.testArrNew + " " + agree + " " + item.name + linkName;
          } else {
            // 第一个前面无需空格，输出name1
            let agreeName = index > 0 ? " " + agree + " " : "";
            this.testArrNew = this.testArrNew + agreeName + item.name;
          }
        }
      });
      return this.testArrNew;
    },
  },
};
</script>
<style scoped>
</style>

效果：

image.png