用Vue2.0轻松完成数组结构到树状结构的转换

2023-09-27 10:18:32

前言

在前端开发中，我们经常会遇到需要将数组结构的数据转换为树状结构的情况。例如，从后端获取的数据可能是一个数组，但我们需要将其转换为树状结构才能在前端进行展示或处理。Vue2.0作为一款功能强大的前端框架，提供了丰富的API和方法，可以帮助我们轻松完成这一任务。

使用Vue2.0转换数组结构到树状结构

1. 理解数组结构和树状结构

在开始转换之前，我们首先需要理解数组结构和树状结构的区别。

数组结构： 数组结构是一种线性数据结构，由一组有序的元素组成，每个元素都有一个唯一的索引。数组中的元素可以是任何类型的数据，包括数字、字符串、对象等。
树状结构： 树状结构是一种非线性数据结构，由一个根节点和多个子节点组成。每个子节点都可以进一步扩展为子节点，形成一个递归结构。树状结构中的节点可以存储数据，也可以存储指向子节点的指针。

2. 实现数组到树状结构的转换

1）使用递归

我们可以使用递归的方式来实现数组到树状结构的转换。递归是一种编程技巧，它允许函数调用自身。在我们的例子中，我们可以使用递归来遍历数组中的每个元素，并将其转换为一个树状结构。

function arrayToTree(array, parentId) {
  // 如果数组为空，则返回一个空数组
  if (!array) {
    return [];
  }

  // 如果父节点ID不存在，则将根节点ID设置为0
  if (!parentId) {
    parentId = 0;
  }

  // 过滤出所有父节点ID为parentId的元素
  const children = array.filter(item => item.parentId === parentId);

  // 递归调用arrayToTree函数，将每个子节点转换为一个树状结构
  for (const child of children) {
    child.children = arrayToTree(array, child.id);
  }

  // 返回转换后的树状结构
  return children;
}

2）使用Vue2.0的computed属性

我们还可以使用Vue2.0的computed属性来实现数组到树状结构的转换。computed属性是一种特殊的属性，它会在组件的依赖项发生变化时重新计算其值。我们可以利用computed属性来监听数组的变化，并重新计算出相应的树状结构。

export default {
  data() {
    return {
      array: [
        { id: 1, parentId: 0, 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' },
      ],
    };
  },
  computed: {
    tree() {
      return arrayToTree(this.array, 0);
    },
  },
};

3. 代码示例

下面是一个完整的代码示例，展示了如何使用Vue2.0将数组结构的数据转换为树状结构：

// Vue2.0组件
export default {
  data() {
    return {
      array: [
        { id: 1, parentId: 0, 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' },
      ],
    };
  },
  computed: {
    tree() {
      return arrayToTree(this.array, 0);
    },
  },
};

// 转换函数
function arrayToTree(array, parentId) {
  if (!array) {
    return [];
  }

  if (!parentId) {
    parentId = 0;
  }

  const children = array.filter(item => item.parentId === parentId);

  for (const child of children) {
    child.children = arrayToTree(array, child.id);
  }

  return children;
}