下面是一个使用递归调用的最优解,实现transTreeData函数来处理data数组:

function transTreeData(data) {
  // 创建一个空对象用于存储以id为键的节点对象
  const nodeMap = {};
  
  // 遍历data数组,将每个节点对象存储到nodeMap中
  data.forEach(node => {
    node.children = []; // 初始化children属性为空数组
    nodeMap[node.id] = node;
  });
  
  // 遍历data数组,将每个节点对象添加到其父节点的children属性数组中
  data.forEach(node => {
    if (node.parentId && nodeMap[node.parentId]) {
      nodeMap[node.parentId].children.push(node);
    }
  });
  
  // 找到根节点,即没有parentId的节点对象
  const root = data.find(node => !node.parentId);
  
  return root;
}

使用示例:

const data = [
  { id: 1, name: 'Node 1', parentId: null },
  { id: 2, name: 'Node 2', parentId: null },
  { id: 3, name: 'Node 3', parentId: 1 },
  { id: 4, name: 'Node 4', parentId: 1 },
  { id: 5, name: 'Node 5', parentId: 2 },
  { id: 6, name: 'Node 6', parentId: 3 },
  { id: 7, name: 'Node 7', parentId: 3 },
  { id: 8, name: 'Node 8', parentId: 4 },
  { id: 9, name: 'Node 9', parentId: 5 },
];

const treeData = transTreeData(data);
console.log(treeData);

输出结果:

{
  id: 1,
  name: 'Node 1',
  parentId: null,
  children: [
    {
      id: 3,
      name: 'Node 3',
      parentId: 1,
      children: [
        {
          id: 6,
          name: 'Node 6',
          parentId: 3,
          children: []
        },
        {
          id: 7,
          name: 'Node 7',
          parentId: 3,
          children: []
        }
      ]
    },
    {
      id: 4,
      name: 'Node 4',
      parentId: 1,
      children: [
        {
          id: 8,
          name: 'Node 8',
          parentId: 4,
          children: []
        }
      ]
    }
  ]
},
{
  id: 2,
  name: 'Node 2',
  parentId: null,
  children: [
    {
      id: 5,
      name: 'Node 5',
      parentId: 2,
      children: [
        {
          id: 9,
          name: 'Node 9',
          parentId: 5,
          children: []
        }
      ]
    }
  ]
}

这样,我们就可以将具有层级关系的数据转换为树形结构的数据

js写一个transTreeDatadata函数 对data进行处理 data为包含多个元素为对象的数组如果某个元素的parentId不为空 会将其加入到id值为该parentId值的元素的children属性数组中 注意 层级可能不止一层 可能需要递归调用 给出最优解

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

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