欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS前端二維數組生成樹形結構示例詳解

 更新時間：2022年09月15日 11:55:15   作者：RealPluto  
這篇文章主要為大家介紹了JS前端二維數組生成樹形結構示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

問題描述

前端在構建國家的省市區(qū)結構時，接口返回的不是樹形結構，這個時候就需要我們進行轉化。以下數據為例

 [
    [
        {
            "districtId": 1586533852834,
            "parentCode": "000",
            "nodeCode": "000001",
            "name": "浙江省",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533872922,
            "parentCode": "000001",
            "nodeCode": "000001001",
            "name": "杭州市",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533872940,
            "parentCode": "000001001",
            "nodeCode": "000001001001",
            "name": "上城區(qū)",
            "districtType": "HUADONG",
            "districtTypeName": null
        }
    ],
    [
        {
            "districtId": 1586533852834,
            "parentCode": "000",
            "nodeCode": "000001",
            "name": "浙江省",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533872922,
            "parentCode": "000001",
            "nodeCode": "000001001",
            "name": "杭州市",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533872961,
            "parentCode": "000001001",
            "nodeCode": "000001001002",
            "name": "下城區(qū)",
            "districtType": "HUADONG",
            "districtTypeName": null
        }
    ],
    [
        {
            "districtId": 1586533852834,
            "parentCode": "000",
            "nodeCode": "000001",
            "name": "浙江省",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533872922,
            "parentCode": "000001",
            "nodeCode": "000001001",
            "name": "杭州市",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533872980,
            "parentCode": "000001001",
            "nodeCode": "000001001003",
            "name": "臨安區(qū)",
            "districtType": "HUADONG",
            "districtTypeName": null
        }
    ],
    [
        {
            "districtId": 1586533852834,
            "parentCode": "000",
            "nodeCode": "000001",
            "name": "浙江省",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533873196,
            "parentCode": "000001",
            "nodeCode": "000001002",
            "name": "寧波市",
            "districtType": "HUADONG",
            "districtTypeName": null
        }
    ],
    [
        {
            "districtId": 1586533852834,
            "parentCode": "000",
            "nodeCode": "000001",
            "name": "浙江省",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533873432,
            "parentCode": "000001",
            "nodeCode": "000001003",
            "name": "溫州市",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533873468,
            "parentCode": "000001003",
            "nodeCode": "000001003002",
            "name": "平陽縣",
            "districtType": "HUADONG",
            "districtTypeName": null
        }
    ],
    [
        {
            "districtId": 1586533852834,
            "parentCode": "000",
            "nodeCode": "000001",
            "name": "浙江省",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533873432,
            "parentCode": "000001",
            "nodeCode": "000001003",
            "name": "溫州市",
            "districtType": "HUADONG",
            "districtTypeName": null
        },
        {
            "districtId": 1586533873486,
            "parentCode": "000001003",
            "nodeCode": "000001003003",
            "name": "文成縣",
            "districtType": "HUADONG",
            "districtTypeName": null
        }
    ]
]

[
    {
        "label": "浙江省",
        "value": 1586533852834,
        "parentCode": "000",
        "nodeCode": "000001",
        "children": [
            {
                "label": "杭州市",
                "value": 1586533872922,
                "parentCode": "000001",
                "nodeCode": "000001001",
                "children": [
                    {
                        "label": "上城區(qū)",
                        "value": 1586533872940,
                        "parentCode": "000001001",
                        "nodeCode": "000001001001"
                    },
                    {
                        "label": "下城區(qū)",
                        "value": 1586533872961,
                        "parentCode": "000001001",
                        "nodeCode": "000001001002"
                    },
                    {
                        "label": "臨安區(qū)",
                        "value": 1586533872980,
                        "parentCode": "000001001",
                        "nodeCode": "000001001003"
                    }
                ]
            },
            {
                "label": "寧波市",
                "value": 1586533873196,
                "parentCode": "000001",
                "nodeCode": "000001002"
            },
            {
                "label": "溫州市",
                "value": 1586533873432,
                "parentCode": "000001",
                "nodeCode": "000001003",
                "children": [
                    {
                        "label": "平陽縣",
                        "value": 1586533873468,
                        "parentCode": "000001003",
                        "nodeCode": "000001003002"
                    },
                    {
                        "label": "文成縣",
                        "value": 1586533873486,
                        "parentCode": "000001003",
                        "nodeCode": "000001003003"
                    }
                ]
            }
        ]
    }
]

實現步驟

① 觀察輸入的數據結構為二維數組，每個數組中存儲了省市區(qū)的全部數據，此時首先需要將二維數組一維化，以取得所有的節(jié)點數據，用于后續(xù)構建樹形結構。

let arr = [].concat.apply([], data)

② 得到所有需要構建樹形結構的數據后，發(fā)現數組中存在重復數據

arrayToTree(data, rootNode) {
  let temp = {}
  let reduceArr = data.reduce((current, next) => {
    temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
    return current
  },[])
}

③ 數據規(guī)范化處理，把所有的數據處理成需要的節(jié)點數據

arrayToTree(data, rootNode) {
  let temp = {}
  let reduceArr = data.reduce((current, next) => {
    temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
    return current
  },[])
  // 2.數組規(guī)范化
  let result = []
  reduceArr.forEach(item => {
    result.push({
      label:item.name,
      value:item.districtId,
      parentCode:item.parentCode,
      nodeCode:item.nodeCode,
      children: []
    })
  })
}

④ 采用遞歸的方式構建樹形結構

getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
  // 構建父節(jié)點
  data.forEach(item =>{
    if (item.parentCode === rootNode) {
      list.push(item)
    }
  })

  list.forEach(item => {
    item.children = []
    // 構建子節(jié)點
    this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
    // 刪除空葉子節(jié)點
    if (item.children.length === 0) {
      delete item.children;
    }
  })
  return list;
}

完整代碼

arrayToTree(data, rootNode, {label = 'label', value = 'value',parentCode = 'parentCode', nodeCode = 'nodeCode', children = ''} = {}) {
      // 1.數組去重
      let temp = {}
      let reduceArr = data.reduce((current, next) => {
        temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
        return current
      },[])
      // 2.數組規(guī)范化
      let result = []
      reduceArr.forEach(item => {
        result.push({
          label:item.name,
          value:item.districtId,
          parentCode:item.parentCode,
          nodeCode:item.nodeCode,
          children: []
        })
      })
      // 3.構建樹形結構
      return this.getTreeList(result,rootNode,[],{
        label,value,parentCode,nodeCode,children
      });
    },
    // 遞歸構建樹形結構
    getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
      data.forEach(item =>{
        if (item.parentCode === rootNode) {
          list.push(item)
        }
      })

      list.forEach(item => {
        item.children = []
        this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
        if (item.children.length === 0) {
          delete item.children;
        }
      })
      return list;
    },

以上就是JS前端二維數組生成樹形結構示例詳解的詳細內容，更多關于JS二維數組樹形結構的資料請關注腳本之家其它相關文章！

相關文章

最新評論