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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 树形结构
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
      }, [])
    },
  1. 输入数据结构与函数预期的不匹配。例如,如果data不是一个数组,或者数组中的元素不包含idnameformIdisFillpidpnameremark这些属性,那么函数就会出错。
  2. 内存问题。如果你的数据结构非常大,可能会超出JavaScript引擎的内存限制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值