返回

巧用引用地址让扁平数组秒变树结构!优化实现不容错过

前端

相信大家在参与项目开发一般都接触过将一个有父子级关系的数组转换为树形结构的需求吧。

下面解析一下扁平化数据转树的优化实现。

  • 背景:

    • 扁平数组是一种一维数据结构,其中每个元素都是一个独立的实体。
    • 树形结构是一种分层数据结构,其中每个元素可以拥有多个子元素,子元素又可以拥有自己的子元素,以此类推。
  • 需求:

    • 将一个扁平数组转换为树形结构,以便于数据的组织和管理。
  • 难点:

    • 如何高效地将扁平数组中的元素组织成树形结构。
    • 如何在树形结构中快速查找和访问元素。
  • 解决方案:

    • 使用引用地址来构建树形结构。
    • 每个元素的引用地址指向其父元素的地址。
  • 优势:

    • 使用引用地址可以大大提高转换速度。
    • 引用地址可以提供更清晰的数据组织方式。
    • 便于数据的查询和访问。
  • 局限性:

    • 引用地址只能在同一内存空间中使用。
    • 引用地址可能会因内存地址的变化而失效。
  • 实现:

    function arrayToTree(array, idKey, parentIdKey, childrenKey) {
      const tree = {};
      const map = {};
      array.forEach((item) => {
        map[item[idKey]] = item;
      });
      array.forEach((item) => {
        const parent = map[item[parentIdKey]];
        if (parent) {
          if (!parent[childrenKey]) {
            parent[childrenKey] = [];
          }
          parent[childrenKey].push(item);
        } else {
          tree = item;
        }
      });
      return tree;
    }
    
  • 示例:

    const array = [
      { id: 1, parentId: null },
      { id: 2, parentId: 1 },
      { id: 3, parentId: 1 },
      { id: 4, parentId: 2 },
      { id: 5, parentId: 2 },
    ];
    const tree = arrayToTree(array, 'id', 'parentId', 'children');
    console.log(tree);
    

    输出结果:

    {
      id: 1,
      parentId: null,
      children: [
        {
          id: 2,
          parentId: 1,
          children: [
            { id: 4, parentId: 2 },
            { id: 5, parentId: 2 },
          ],
        },
        {
          id: 3,
          parentId: 1,
          children: [],
        },
      ],
    }
    

在本文中,我们介绍了如何使用引用地址来实现扁平数组到树形结构的优化转换。这种方法具有速度快、结构清晰、查询方便等优点,但在不同内存空间中使用时存在一定的局限性。通过结合实际开发需求,您可以选择合适的数据结构来存储和管理您的数据,以提高应用程序的性能和可维护性。