vue将树形结构的数组对象扁平化，把所有数组的对象单独取出来组成新数组对象

最新推荐文章于 2024-10-14 09:03:04 发布

原创最新推荐文章于 2024-10-14 09:03:04 发布 · 648 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用递归方法将树形数据结构扁平化，以及一种不太推荐的非递归方法。特别提到了处理数据结构不完整和内存问题的方法。

// 树形结构
let arrTree=[
        {
            "id": "1172544720060223488",
            "pid": "0",
            "name": "测试数据",
            "pname": null,
            "isFill": 0,
            "remark": "",
            "formId": null,
            "children": [
                {
                    "id": "1175119820747902976",
                    "pid": "1172544720060223488",
                    "name": "1-1",
                    "pname": "测试数据",
                    "isFill": 0,
                    "remark": "-",
                    "formId": null,
                    "children": [
                        {
                            "id": "1175119936229675008",
                            "pid": "1175119820747902976",
                            "name": "1-1-1",
                            "pname": "1-1",
                            "isFill": 0,
                            "remark": "-",
                            "formId": null,
                            "children": [
                                {
                                    "id": "1175120124839137280",
                                    "pid": "1175119936229675008",
                                    "name": "1-1-1-1",
                                    "pname": "1-1-1",
                                    "isFill": 1,
                                    "remark": "-",
                                    "formId": "1171463498387099648",
                                    "children": []
                                }
                            ]
                        },
                        {
                            "id": "1175119974544642048",
                            "pid": "1175119820747902976",
                            "name": "1-1-2",
                            "pname": "1-1",
                            "isFill": 0,
                            "remark": "-",
                            "formId": null,
                            "children": [
                                {
                                    "id": "1175120197488676864",
                                    "pid": "1175119974544642048",
                                    "name": "1-1-2-1",
                                    "pname": "1-1-2",
                                    "isFill": 1,
                                    "remark": "-",
                                    "formId": "1171463498387099648",
                                    "children": []
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": "1175119860837060608",
                    "pid": "1172544720060223488",
                    "name": "1-2",
                    "pname": "测试数据",
                    "isFill": 0,
                    "remark": "-",
                    "formId": null,
                    "children": []
                },
                {
                    "id": "1175119896216014848",
                    "pid": "1172544720060223488",
                    "name": "1-3",
                    "pname": "测试数据",
                    "isFill": 0,
                    "remark": "-",
                    "formId": null,
                    "children": []
                }
            ]
        }
    ]

使用递归方法将树形数据扁平化并提取对象

    flattenTree (data) {
      console.log(data)
      const flattened = []
      for (const item of data) {
        flattened.push(item)
        if (item.children && item.children.length > 0) {
          flattened.push(...this.flattenTree(item.children))
        }
      }
      return flattened
    },

执行扁平化操作并将结果赋值给flattenedData

this.flattenedData = this.flattenTree(arrTree)

处理后效果

还有一种方法，不太推荐

 flatTen (data) {
      return data.reduce((prev, cur) => {
        prev.push({ id: cur.id, name: cur.name, formId: cur.formId, isFill: cur.isFill, pid: cur.pid, pname: cur.pname, remark: cur.remark })
        if (cur.children) {
          prev.push(...this.flatTen(cur.children))
        }
        return prev
      }, [])
    },

输入数据结构与函数预期的不匹配。例如，如果data不是一个数组，或者数组中的元素不包含id、name、formId、isFill、pid、pname、remark这些属性，那么函数就会出错。
内存问题。如果你的数据结构非常大，可能会超出JavaScript引擎的内存限制。