以下是一个简单的示例,将具有父子关系的数组转换为树形结构:

const arr = [
  { id: 1, name: 'A', parentId: null },
  { id: 2, name: 'B', parentId: 1 },
  { id: 3, name: 'C', parentId: 1 },
  { id: 4, name: 'D', parentId: 2 },
  { id: 5, name: 'E', parentId: 2 },
  { id: 6, name: 'F', parentId: 3 },
  { id: 7, name: 'G', parentId: null },
];

function buildTree(arr, parentId = null) {
  const tree = [];
  arr.forEach(item => {
    if (item.parentId === parentId) {
      const children = buildTree(arr, item.id);
      if (children.length) {
        item.children = children;
      }
      tree.push(item);
    }
  });
  return tree;
}

const result = buildTree(arr);
console.log(result);

输出:

[
  {
    'id': 1,
    'name': 'A',
    'parentId': null,
    'children': [
      {
        'id': 2,
        'name': 'B',
        'parentId': 1,
        'children': [
          {
            'id': 4,
            'name': 'D',
            'parentId': 2
          },
          {
            'id': 5,
            'name': 'E',
            'parentId': 2
          }
        ]
      },
      {
        'id': 3,
        'name': 'C',
        'parentId': 1,
        'children': [
          {
            'id': 6,
            'name': 'F',
            'parentId': 3
          }
        ]
      }
    ]
  },
  {
    'id': 7,
    'name': 'G',
    'parentId': null
  }
]

该函数使用递归的方式构建整个树形结构。在每一层递归时,通过传递父节点的 id 参数来筛选出当前层级的子节点,并将它们添加到当前节点的 children 属性中。如果当前节点没有子节点,则直接将其添加到 tree 数组中。最后返回整个树形结构。

JavaScript 数组转换为树形结构 - 代码示例

原文地址: https://www.cveoy.top/t/topic/noFL 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录