揭秘 Vue/React 菜单组件的秘密武器：数组变树函数

2023-10-20 21:31:21

概览

在构建 Vue/React 菜单组件时，我们常常需要将从数据库中获取的数组数据转换成树形结构。这可以使菜单具有层级关系，方便用户导航和理解。

数组变树函数

为了将数组转换成树形结构，我们可以使用一个递归函数。这个函数将遍历数组，并根据每个元素的 parent 属性，将它们组合成树形结构。

function arrayToTree(array, parentId = null) {
  const tree = [];
  const children = array.filter(item => item.parentId === parentId);
  for (const child of children) {
    const subtree = arrayToTree(array, child.id);
    if (subtree.length > 0) {
      child.children = subtree;
    }
    tree.push(child);
  }
  return tree;
}

使用方式

使用数组变树函数非常简单。只需要将数组作为参数传递给该函数，即可得到相应的树形结构。

const data = [
  { id: 1, parentId: null, name: '根节点' },
  { id: 2, parentId: 1, name: '子节点1' },
  { id: 3, parentId: 1, name: '子节点2' },
  { id: 4, parentId: 2, name: '孙子节点1' },
  { id: 5, parentId: 2, name: '孙子节点2' },
];

const tree = arrayToTree(data);

console.log(tree);

输出结果：

[
  {
    id: 1,
    parentId: null,
    name: '根节点',
    children: [
      {
        id: 2,
        parentId: 1,
        name: '子节点1',
        children: [
          {
            id: 4,
            parentId: 2,
            name: '孙子节点1'
          },
          {
            id: 5,
            parentId: 2,
            name: '孙子节点2'
          }
        ]
      },
      {
        id: 3,
        parentId: 1,
        name: '子节点2'
      }
    ]
  }
]

性能优化

数组变树函数的性能可能会随着数组规模的增加而下降。为了提高性能，我们可以使用一些优化技巧。

减少递归深度 ：如果数组中有大量的嵌套结构，那么递归深度可能会很深，导致性能下降。我们可以通过预处理数据，减少递归深度。例如，我们可以先将数组中的元素按层次排序，然后再进行递归转换。
使用 memoization ：memoization是一种缓存技术，可以存储已经计算过的结果，以便以后重用。我们可以使用 memoization 来存储已经转换过的子树，这样就不需要重复计算。
使用并行计算 ：如果我们的程序支持并行计算，那么我们可以使用并行计算来转换数组。这可以大大提高转换速度。