巧用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);
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我可以为您解答这个问题。 首先,需要明确一下数组和树的数据结构。数组是一组相同类型的元素按照一定顺序排列的集合,而树是由节点组成的数据结构,每个节点包含一个值和若干子节点,子节点可以为空。 现在假设我们有一个数组 arr,每个元素都是一个包含两个属性的对象:id 和 parentId,表示该元素的节点id和父节点id。我们需要将这个数组化为一棵树,其中根节点的parentId为null。 以下是代码实现: ```python class Node: def __init__(self, id): self.id = id self.children = [] def build_tree(arr): node_map = {} root = None for item in arr: node = Node(item['id']) node_map[node.id] = node if item['parentId'] is None: root = node else: parent_node = node_map[item['parentId']] parent_node.children.append(node) return root ``` 这里我们定义了一个 Node 类表示树的节点,包含一个节点id和子节点列表。然后我们定义了一个 build_tree 函数来构建树,该函数接受一个数组 arr 作为参数。我们使用一个字典 node_map 来保存节点信息,key 为节点id,value 为节点对象。然后遍历数组 arr,对于每个元素创建一个节点,并将其添加到 node_map 中。如果该节点的 parentId 为 null,则将其作为根节点,否则将其添加到其父节点的子节点列表中。最后返回根节点即可。 希望这个答案能够帮到您,如果您有任何问题或疑问,可以随时向我提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端 - wei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值