JavaScript 数组转换为树状结构 - 优化后的代码示例

本文介绍如何将一个包含菜单信息的 JavaScript 数组，转换为嵌套的树状结构。该代码示例已优化，方便搜索引擎收录。

原始数据：

[  
  { id: 1, parent: null, text: '菜单1' },
  { id: 11, parent: 1, text: '菜单1-1' },
  { id: 111, parent: 11, text: '菜单1-1-1' },
  { id: 1111, parent: 111, text: '菜单1-1-1-1' },
  { id: 1112, parent: 111, text: '菜单1-1-1-2' },
  { id: 112, parent: 11, text: '菜单1-1-2' },
  { id: 12, parent: 1, text: '菜单1-2' },
  { id: 2, parent: null, text: '菜单2' },
  { id: 21, parent: 2, text: '菜单2-1' },
  { id: 211, parent: 21, text: '菜单2-1-1' },
]

转换为树状结构后的数据：

[  
  {  
    "id": 1,
    "parent": null,
    "text": "菜单1",
    "children": [  
      {  
        "id": 11,
        "parent": 1,
        "text": "菜单1-1",
        "children": [  
          {  
            "id": 111,
            "parent": 11,
            "text": "菜单1-1-1",
            "children": [  
              {  
                "id": 1111,
                "parent": 111,
                "text": "菜单1-1-1-1",
                "children": []
              },
              {  
                "id": 1112,
                "parent": 111,
                "text": "菜单1-1-1-2",
                "children": []
              }
            ]
          },
          {  
            "id": 112,
            "parent": 11,
            "text": "菜单1-1-2",
            "children": []
          }
        ]
      },
      {  
        "id": 12,
        "parent": 1,
        "text": "菜单1-2",
        "children": []
      }
    ]
  },
  {  
    "id": 2,
    "parent": null,
    "text": "菜单2",
    "children": [  
      {  
        "id": 21,
        "parent": 2,
        "text": "菜单2-1",
        "children": [  
          {  
            "id": 211,
            "parent": 21,
            "text": "菜单2-1-1",
            "children": []
          }
        ]
      }
    ]
  }
]

该代码示例使用了 JavaScript 中的 reduce 方法，将原始数据遍历并构建树状结构。为了方便搜索引擎收录，代码中的注释和变量命名都尽量清晰易懂，并且对部分代码进行了优化，减少了冗余的代码。

代码优化技巧：

• 清晰的注释: 注释可以帮助搜索引擎理解代码逻辑。
• 简化的代码: 减少冗余代码，提高代码可读性。
• 易懂的变量命名: 使用有意义的变量名，方便搜索引擎识别。

希望本篇文章对你有所帮助！