JS树形结构递归平铺转为一维数组

5 篇文章 0 订阅

场景遇到

  1. 比如订单行上存在套散件关系,传递给后端时需要处理数据

  1. 如表格存在树形结构做勾选回显时需要平铺数据

  1. 右边数据存在时,左边表格树形结构回显

1.方法函数如下

/**
       * 递归平铺转为一维数组
       * @param {*} treeNode 传进来的值,可以是数组 可以是一个对象
       * @param {*} childKey 树形结构 children
       * @returns
       */
      function flat(treeNode, childKey = "children") {
        //判断传进来是数组还是对象 如果是数组[...数组],浅拷贝 操作不影响原来数组,如果是对象把它变为数组
        const nodes = Array.isArray(treeNode) ? [...treeNode] : [treeNode];
        const result = [];
        nodes.forEach((node) => {
          result.push(node);
          if (Array.isArray(node[childKey])) {
            // node[childKey].forEach((_node) =>
            //   result.push(...flat(_node, childKey))
            // ); //第一种写法 递归平铺
            //第二种写法 (简洁) 如同[1,2,3,...[4,5,6]] = [1,2,3,4,5,6]
            result.push(...flat(node[childKey], childKey)); 
          }
        });
        return result;
      }

2.模拟数据如下

    let testArr = [
        {
          custCode: "ZT00032232",
          custName: "天津康盛华通科技有限公司",
          shopList: [
            {
              shopCode: "DP20230315217058",
              shopName: "附件111",
              custCode: "DP20230315217058",
              custName: "附件111",
              parentCustCode: "ZT00032232",
              parentCustName: "天津康盛华通科技有限公司",
            },
            {
              shopCode: "DP20230315616201",
              shopName: "111",
              custCode: "DP20230315616201",
              custName: "111",
              parentCustCode: "ZT00032232",
              parentCustName: "天津康盛华通科技有限公司",
            },
          ],
        },
        {
          custCode: "ZT00030989",
          custName: "付浩泽",
          shopList: [
            {
              shopCode: "DP20230315473282",
              shopName: "京东分销-HHH亿投专卖店",
              custCode: "DP20230315473282",
              custName: "京东分销-HHH亿投专卖店",
              parentCustCode: "ZT00030989",
              parentCustName: "付浩泽",
            },
            {
              shopCode: "DP20230315350496",
              shopName: "北京京东世纪贸易有限公司-白电",
              custCode: "DP20230315350496",
              custName: "北京京东世纪贸易有限公司-白电",
              parentCustCode: "ZT00030989",
              parentCustName: "付浩泽",
            },
          ],
        },
        {
          custCode: "ZT00030068",
          custName: "前郭县额如乡腾达塑钢门窗装潢材料",
          shopList: [
            {
              shopCode: "DP20230315885160",
              shopName: "",
              custCode: "DP20230315885160",
              custName: "",
              parentCustCode: "ZT00030068",
              parentCustName: "前郭县额如乡腾达塑钢门窗装潢材料",
            },
          ],
        },
        {
          custCode: "ZT00032231",
          custName: "二道区弘舟家用电器行",
          shopList: [
            {
              shopCode: "DP20230315968206",
              shopName: "HHH集团官方旗舰店",
              custCode: "DP20230315968206",
              custName: "HHH集团官方旗舰店",
              parentCustCode: "ZT00032231",
              parentCustName: "二道区弘舟家用电器行",
            },
          ],
        },
        {
          custCode: "ZT00028859",
          custName: "长春鼎晟源商贸行",
          shopList: [
            {
              shopCode: "DP20230315317900",
              shopName: "HHH好丽友专卖店",
              custCode: "DP20230315317900",
              custName: "HHH好丽友专卖店",
              parentCustCode: "ZT00028859",
              parentCustName: "长春鼎晟源商贸行",
            },
          ],
        },
        {
          custCode: "ZT00032949",
          custName: "九台区城西新四海家电商场",

          shopList: [],
        },
        {
          custCode: "ZT10001164",
          custName: "德惠市金诚电器有限公司",
          shopList: [],
        },
        {
          custCode: "ZT00029754",
          custName: "长春汽车经济技术开发区艳华家电专卖店",
          shopList: [],
        },
        {
          custCode: "ZT00029474",
          custName: "汪艳杰",
          shopList: [],
        },
        {
          custCode: "ZT00026399",
          custName: "洮南市鑫晟电器商行",
          shopList: [],
        },
        {
          custCode: "ZT00031086",
          custName: "九台区东湖鼎溢家电行",
          shopList: [],
        },
        {
          custCode: "ZT00035323",
          custName: "客音售后换机-长春本部",
          shopList: [],
        },
        {
          custCode: "ZT00031015",
          custName: "和龙市三星专卖店",
          shopList: [],
        },
        {
          custCode: "ZT00029722",
          custName: "光复路鑫晟宏家用电器商行",
          shopList: [],
        },
        {
          custCode: "ZT10000915",
          custName: "李春亮",
          shopList: [],
        },
        {
          custCode: "ZT10000983",
          custName: "长春政策赠机",
          shopList: [],
        },
        {
          custCode: "ZT00028605",
          custName: "陈雪",
          shopList: [],
        },
        {
          custCode: "ZT00032686",
          custName: "吉林市昌邑区国彬家电维修部",
          shopList: [],
        },
        {
          custCode: "ZT10001175",
          custName: "宽城区加友家用电器经销处",
          shopList: [],
        },
        {
          custCode: "ZT00031332",
          custName: "吉林省科隆数码科技有限责任公司",
          shopList: [],
        },
      ];

      let testArrObj = {
        custCode: "ZT00032232",
        custName: "天津康盛华通科技有限公司",
        shopList: [
          {
            shopCode: "DP20230315217058",
            shopName: "附件111",
            custCode: "DP20230315217058",
            custName: "附件111",
            parentCustCode: "ZT00032232",
            parentCustName: "天津康盛华通科技有限公司",
          },
          {
            shopCode: "DP20230315616201",
            shopName: "111",
            custCode: "DP20230315616201",
            custName: "111",
            parentCustCode: "ZT00032232",
            parentCustName: "天津康盛华通科技有限公司",
          },
        ],
      };

执行 结果如下

let arr = flat(testArr, "shopList");
console.log("arr", arr);
let arrobj = flat(testArrObj, "shopList");
console.log("arrobj", arrobj);

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值