JavaScript 实现无限级递归树

一. 需求

遇到一个需求，经常被联众以树形结构前端，或前端对当前区域的类型直接处理的形式返回的数据（如该省掉了一个类型的数据）。后台小哥哥突然换了一种化解的数据给自己的前端处理数据......

const data = [
  {
    "area_id": 5,
    "name": "广东省",
    "parent_id": 0,
  },  
  {
    "area_id": 6,
    "name": "广州市",
    "parent_id": 5,
  },
  {
    "area_id": 7,
    "name": "深圳市",
    "parent_id": 5,
  },
  {
    "area_id": 4,
    "name": "北京市",
    "parent_id": 3,
  },
  {
    "area_id": 3,
    "name": "北京",
    "parent_id": 0,
  },
  {
    "area_id": 2,
    "name": "测试子地区",
    "parent_id": 1,
  },
  {
    "area_id": 1,
    "name": "测试地区",
    "parent_id": 0,
  }
]

emmm，换个想法头想也只是练练一下，撸起袖子干吧，然后就总结了以下方法~

二. 方法一 → 对象

对象的对象甚至一直在倚仗天龙宝的存在，在我眼里身旁的奥能便便，也算是不错的武术秘籍了。

/**
 * @Description: 数组 转 嵌套数组
 * @param { Array } list => 需要转换的数组
 * @param { Object } nodeName => 父节点id对应的字段和子节点id对应的字段的集合
 *  {
 *    pid: '', // 父节点的id
 *    id: ''   // 字节点的id
 *  }
 *
 * @return { Array } treeData => 转换后的数组
 */
export function setTreeData(list, nodeName) {
  let arr = [];

  nodeName = {
    id: nodeName ? nodeName.id : 'id',
    pid: nodeName ? nodeName.pid : 'pid',
  };

  arr = JSON.parse(JSON.stringify(list));
  //  删除所有 children,以防止多次调用
  arr.forEach((item) => {
    delete item.children;
  });
  const map = {}; // 构建map
  arr.forEach((i) => {
    map[i[nodeName.id]] = i; // 构建以id为键 当前数据为值
  });

  const treeData = [];
  arr.forEach((child) => {
    const mapItem = map[child[nodeName.pid]]; // 判断当前数据的pid是否存在map中

    if (mapItem) { // 存在则表示当前数据不是最顶层数据
      // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
      (mapItem.children || (mapItem.children = [])).push(child); // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
    } else { // 不存在则是组顶层数据
      treeData.push(child);
    }
  });
  return treeData;
}

console.log(setTreeData(data)); // 输出整理后的数据

三. 总结

以上简单介绍了一种将扁平化数据转化为递归树的方法，学会了吗，没学会再回去好好撸撸码!！

目前我遇到需要将数据整理树形结构的主要在菜单栏或分类的树形结构上，当然还有像省市这种有从属关系的结构。不过就算以后遇到了都唔驶惊啦~恩，继续更新总结中....