JS前端二维数组生成树形结构示例详解

作为本文作者，我将为大家详细讲解“JS前端二维数组生成树形结构示例详解”的攻略，让读者能够更加深入地了解并掌握二维数组生成树形结构的方法。

标题

1. 介绍

在前端开发中，我们经常需要将一组数据进行树形结构的展示，这时候我们就需要通过一些方法来实现树形结构的生成。本文就将为大家介绍一种使用二维数组生成树形结构的方法。

2. 实现步骤

2.1 数组格式

首先，我们需要准备一个二维数组用来存储树形数据，通常情况下，每个二维数组中的元素都是一个对象，对象中包含了当前节点的id、父节点的id以及节点的名称等信息。

let treeData = [
    { id: 1, parentId: 0, title: '根节点1' },
    { id: 2, parentId: 1, title: '子节点1-1' },
    { id: 3, parentId: 1, title: '子节点1-2' },
    { id: 4, parentId: 2, title: '子节点1-1-1' },
    { id: 5, parentId: 2, title: '子节点1-1-2' },
    { id: 6, parentId: 3, title: '子节点1-2-1' },
    { id: 7, parentId: 3, title: '子节点1-2-2' }
]

2.2 生成树形结构

接下来，我们需要编写一个函数，用来将树形数据转化为树形结构。

function generateTreeData(treeData, parentId) {
    let tree = []
    for (let i = 0; i < treeData.length; i++) {
        let node = treeData[i]
        if (node.parentId === parentId) {
            let children = generateTreeData(treeData, node.id)
            if (children.length > 0) {
                node.children = children
            }
            tree.push(node)
        }
    }
    return tree
}

在函数中，我们首先定义了一个tree数组，用来存储树形结构的数据。然后遍历二维数组，找到所有parentId等于当前节点id的元素，对每个元素递归调用generateTreeData函数，并将返回的数组作为当前节点的子节点，将节点插入到tree数组中。最后返回tree数组即可。

示例说明

示例一

假设我们有如下二维数组：

let treeData = [
    { id: 1, parentId: 0, title: '根节点1' },
    { id: 2, parentId: 1, title: '子节点1-1' },
    { id: 3, parentId: 1, title: '子节点1-2' },
    { id: 4, parentId: 2, title: '子节点1-1-1' },
    { id: 5, parentId: 2, title: '子节点1-1-2' },
    { id: 6, parentId: 3, title: '子节点1-2-1' },
    { id: 7, parentId: 3, title: '子节点1-2-2' }
]

将其传递给generateTreeData函数，则可以生成如下树形结构：

[{
  id: 1,
  parentId: 0,
  title: '根节点1',
  children: [{
    id: 2,
    parentId: 1,
    title: '子节点1-1',
    children: [{
      id: 4,
      parentId: 2,
      title: '子节点1-1-1'
    }, {
      id: 5,
      parentId: 2,
      title: '子节点1-1-2'
    }]
  }, {
    id: 3,
    parentId: 1,
    title: '子节点1-2',
    children: [{
      id: 6,
      parentId: 3,
      title: '子节点1-2-1'
    }, {
      id: 7,
      parentId: 3,
      title: '子节点1-2-2'
    }]
  }]
}]

示例二

假设我们有如下二维数组：

let treeData2 = [
    { id: 1, parentId: 0, title: '根节点1' },
    { id: 2, parentId: 1, title: '子节点1-1' },
    { id: 3, parentId: 2, title: '子节点1-1-1' },
    { id: 4, parentId: 0, title: '根节点2' },
    { id: 5, parentId: 4, title: '子节点2-1' }
]

将其传递给generateTreeData函数，则可以生成如下树形结构：

[
  {
    id: 1,
    parentId: 0,
    title: '根节点1',
    children: [
      {
        id: 2,
        parentId: 1,
        title: '子节点1-1',
        children: [
          {
            id: 3,
            parentId: 2,
            title: '子节点1-1-1'
          }
        ]
      }
    ]
  },
  {
    id: 4,
    parentId: 0,
    title: '根节点2',
    children: [
      {
        id: 5,
        parentId: 4,
        title: '子节点2-1'
      }
    ]
  }
]

以上就是整个过程的详细说明，使用二维数组生成树形结构非常方便，希望对大家有所帮助。