巧用map把数组对象转换成Tree

前言

前天，接到一个同学的请求，请我帮忙用递归把一堆对象组成的数组转换成tree,我当时就觉得为啥一定要用递归那？也可以使用Map啊。如何使用呢，下面进行解析

一、Map的特性

使用方法

const map = new Map()
map.set('key','value')
map.set('12',[1,2,3,4])
map.set('key','value2')

打印map后发现是一个键值对的集合，而且还有一个现象就是，Map中的键只出现了一次，如上图示例，添加了2个键为 key 的键值对，结果最终只显示了最后出现的这个键值对。

 那跟转换成Tree有什么关系。请看如何巧妙的利用Map。

二、利用Map实现对象数组转Tree

当前有一个数组如下。定义一个 arrayToTree 函数去将下列数组转换成tree

 const arr = [
      { id: 1, name: "A", parentId: null },
      { id: 2, name: "B", parentId: 1 },
      { id: 3, name: "C", parentId: 1 },
      { id: 4, name: "D", parentId: 2 },
      { id: 5, name: "E", parentId: 2 },
      { id: 6, name: "F", parentId: null },
      { id: 7, name: "G", parentId: 6 },
      { id: 8, name: "H", parentId: 7 },
      { id: 9, name: "I", parentId: 7 },
      { id: 9, name: "J", parentId: 7 },
      { id: 9, name: "K", parentId: 10 },
    ];

步骤1：将数组中的对象转换为节点，并将节点保存到map中

      const map = new Map();
      // 将数组中的对象转换为节点，并将节点保存到map中
      for (const item of arr) {
        map.set(node.id, node);
      }

打印map发现如下，利用map去除了相同id的节点，如上图3个9都被去重了。

步骤2：接下来我们直接去根据数组中的每一项节点的parentId去找对应的id。

操作方式：1）遍历原始数据，从map集合中找到对应的 item.id,如果有parentId就说明有父节点.

                  2) 如果没有父节点就说明此节点为单独节点。

     // 遍历数组中的每一个对象，将其添加到对应的父节点的子节点数组中
    const roots = []  
    for (const item of arr) {
        item.children = [];
        // 去集合中找对应的子节点
        const node = map.get(item.id);
        if (item.parentId) {
          // 去集合中找对应的父节点
          const parent = map.get(item.parentId);
          // 如果父节点存在，把子节点放入到父节点的children数组中
          if (parent) parent.children.push(node);
          // 如果父节点有值，但是集合中不存在，如上述数据 parentId: 11 ，找不到对应id为11的，也设置为子节点
          if (!parent) roots.push(node);
        } else {
          roots.push(node);
        }
      }

三、完整的代码如下

   function arrayToTree(arr) {
      const roots = [];
      const map = new Map();
      // 将数组中的对象转换为节点，并将节点保存到map中
      for (const item of arr) {
        map.set(item.id, item);
      }

      // 遍历数组中的每一个对象，将其添加到对应的父节点的子节点数组中
      for (const item of arr) {
        item.children = [];
        // 去集合中找对应的子节点
        const node = map.get(item.id);
        if (item.parentId) {
          // 去集合中找对应的父节点
          const parent = map.get(item.parentId);
          // 如果父节点存在，把子节点放入到父节点的children数组中
          if (parent) parent.children.push(node);
          // 如果父节点有值，但是集合中不存在，如上述数据 parentId: 11 ，找不到对应id为11的，也设置为子节点
          if (!parent) roots.push(node);
        } else {
          roots.push(node);
        }
      }
      return roots;
    }

    const arr = [
      { id: 1, name: "A", parentId: null },
      { id: 2, name: "B", parentId: 1 },
      { id: 3, name: "C", parentId: 1 },
      { id: 4, name: "D", parentId: 2 },
      { id: 5, name: "E", parentId: 2 },
      { id: 6, name: "F", parentId: null },
      { id: 7, name: "G", parentId: 6 },
      { id: 8, name: "H", parentId: 7 },
      { id: 9, name: "I", parentId: 7 },
      { id: 9, name: "J", parentId: 7 },
      { id: 10, name: "K", parentId: 11 },
    ];

    const roots = arrayToTree(arr);

可能部分同学不理解为啥最终push node 后就生成了tree。这里就需要说一下了，这里利用了引用类型存的是地址指向特点。你可以在返还roots前打印map。发现map集合其实都是已经组装好的节点。最终只返回根节点就可以了。这里有2个操作等于利用指向节点进行套娃模式。

1. map.get(item.parentId); 找父节点
2. parent.children.push(node); 往父节点内塞子节点
3.因为子节点内有children这个引用类型的数组，所有子节点内chilren塞入其他节点时，自然也在其他指向这个子节点的数据中也塞入了这个节点。

其他：可能部分同学使用Element时发现没有子节点也会有下钻图标，这里是因为每一项子节点都有children的原因，如需改进就要改代码如下：把添加children操作放入到判断里面。需要添加children的时候再添加

     for (const item of arr) {
        // 去集合中找对应的子节点
        const node = map.get(item.id);
        if (item.parentId) {
          // 去集合中找对应的父节点
          const parent = map.get(item.parentId);
          // 如果父节点存在，把子节点放入到父节点的children数组中
          if (parent) {
            parent.children
              ? parent.children.push(node)
              : (parent.children = [node]);
          }
          // 如果父节点有值，但是集合中不存在，如上述数据 parentId: 11 ，找不到对应id为11的，也设置为子节点
          if (!parent) roots.push(node);
        } else {
          roots.push(node);
        }

代码007普通

打赏 收藏 海报 链接