实现前端二维数组生成树形结构的思路分享

2024-01-02 03:08:57

前言

前端在构建国家的省市区结构时，接口返回的不是树形结构，这个时候就需要我们进行转化。本文提供了一种实现思路，希望能给各位一个参考。

实现思路

首先，我们需要将二维数组中的数据按照一定的规则进行排序，比如按照省份的拼音排序。
然后，我们遍历排序后的二维数组，并将其中的每个元素都作为一个节点。
接下来，我们需要根据每个节点的父节点ID将其添加到树形结构中。
最后，我们需要将树形结构返回给前端。

代码示例

// 二维数组数据
const data = [
  ['中国', '北京', 1],
  ['中国', '上海', 2],
  ['中国', '广东', 3],
  ['中国', '四川', 4],
  ['中国', '浙江', 5],
  ['北京', '东城区', 11],
  ['北京', '西城区', 12],
  ['北京', '朝阳区', 13],
  ['北京', '海淀区', 14],
  ['北京', '丰台区', 15],
  ['上海', '黄浦区', 21],
  ['上海', '徐汇区', 22],
  ['上海', '长宁区', 23],
  ['上海', '静安区', 24],
  ['上海', '普陀区', 25],
  ['广东', '广州市', 31],
  ['广东', '深圳市', 32],
  ['广东', '佛山市', 33],
  ['广东', '东莞市', 34],
  ['广东', '中山市', 35],
  ['四川', '成都市', 41],
  ['四川', '自贡市', 42],
  ['四川', '绵阳市', 43],
  ['四川', '南充市', 44],
  ['四川', '宜宾市', 45],
  ['浙江', '杭州市', 51],
  ['浙江', '宁波市', 52],
  ['浙江', '温州市', 53],
  ['浙江', '嘉兴市', 54],
  ['浙江', '湖州市', 55]
];

// 排序
data.sort((a, b) => {
  return a[0].localeCompare(b[0]);
});

// 构建树形结构
const tree = [];
for (let i = 0; i < data.length; i++) {
  const node = {
    name: data[i][1],
    id: data[i][2],
    children: []
  };

  if (data[i][0] === '中国') {
    tree.push(node);
  } else {
    for (let j = 0; j < tree.length; j++) {
      if (tree[j].name === data[i][0]) {
        tree[j].children.push(node);
        break;
      }
    }
  }
}

// 返回树形结构
return tree;