递归处理数据,进行数据扁平化

 /* 实现数据的平铺 
    flatten*/
    const options = [
      {
        value: "330000",
        label: "浙江省",
        children: [
          {
            value: "330100",
            label: "杭州市",
            children: [
              {
                value: "330106",
                label: "西湖区",
              },
              {
                value: "330107",
                label: "余杭区",
              },
            ],
          },
          {
            value: "330200",
            label: "温州市",
            children: [
              {
                value: "330206",
                label: "龙湾区",
              },
            ],
          },
        ],
      },
      {
        value: "120000",
        label: "新疆维吾尔自治区",
        children: [
          {
            value: "120100",
            label: "博尔塔拉蒙古自治州",
            children: [
              {
                value: "120111",
                label: "阿拉山口市",
              },
            ],
          },
        ],
      },
    ];
       /**
* 实现函数平铺上面的树形结构,预期结果如下:flattenTree(options)
[
[{  "value": "330000",  "label": "浙江省"},{  "value": "330100",  "label": "杭州市",},{  "value": "330106",  "label": "西湖区"}],
[{  "value": "330000",  "label": "浙江省",},{  "value": "330100",  "label": "杭州市",},{  "value": "330107",  "label": "余杭区"}],
[{  "value": "330000",  "label": "浙江省",},{  "value": "330200",  "label": "温州市",},{  "value": "330206",  "label": "龙湾区"}],
[{  "value": "120000",  "label": "新疆维吾尔自治区",},{  "value": "120100",  "label": "博尔塔拉蒙古自治州",},{  "value": "120111",  "label": "阿拉山口市"}]
]
*/

  // console.log( options )
    /* 实现数据的平铺
    可能会有非常多条件的判断 */
    var arr = []
    /* options 第一次进入是一个数组 
    options这个值 既可以是数组又可以是对象*/
    function flattenTree(options, list) {
      // 只在第一次函数执行 后面不会执行了 根据数据创建对应的分组
      // 第一次执行 只是为了新建浙江和新疆这两个数组
      if (arr.length == 0) {
        // 遍历数组 遍历出两个对象
        for (let i = 0; i < options.length; i++) {
          if (!arr[i]) arr[i] = [];//创建list
          // options第二次进入是一个对象
          flattenTree(options[i], arr[i]);
        }
      }
      // 第一次执行 根本不会执行这一句 第二次执行时 递归执行时 这个时候list是有值的了
      if (list) {
        list.push({
          value: options.value,
          label: options.label,
        })
        if (!options.children) return;
        for (let j = 0; j < options.children.length; j++) {
          flattenTree(options.children[j], list)
        }
      }
      // console.log(arr)
    }
    flattenTree(options)
    /* 
    1、先将数据的结构看懂 , 也就是先将题或者需求给它看懂;
    
    */
    console.log(arr);
    // localStorage.setItem('maplist', JSON.stringify(arr))
    let list1 = [
      [
        { "value": "330000", "label": "浙江省" },
        { "value": "330100", "label": "杭州市" },
        { "value": "330106", "label": "西湖区" },
        { "value": "330107", "label": "余杭区" },
        { "value": "330200", "label": "温州市" },
        { "value": "330206", "label": "龙湾区" }
      ],
      [
        { "value": "120000", "label": "新疆维吾尔自治区" },
        { "value": "120100", "label": "博尔塔拉蒙古自治州" },
        { "value": "120111", "label": "阿拉山口市" }
      ]
    ]

    console.log(options)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值