js 根据指定字段ParentCode 将一维数组转为由children关联的多维数组

js yekong

uniapp 项目开发中,接口返回的是一维数组,由ParentCode来将数组进行关联的,这里需要将数据转为多维数组并通过children进行关联,方便在页面中渲染处理。

假设一维数组的每个元素都包含一个 ParentCode 字段和一个 ID 字段,表示它的父节点和自身的唯一标识符。
以下是将一维数组转换成多维数组的示例代码:


function convertToTree(arr, rootParentCode) {
  const map = {}; // 用于存储每个节点的索引
  const result = []; // 用于存储树的根节点
  // 将每个节点放入 map 中
  arr.forEach(item => {
    map[item.ID] = { ...item, children: [] };
  });
  // 遍历每个节点,将它们放入它们父节点的 children 中
  Object.values(map).forEach(item => {
    const parent = map[item.ParentCode];
    if (parent) {
      parent.children.push(item);
    } else if (item.ParentCode === rootParentCode) {
      result.push(item); // 没有父节点,且 ParentCode 等于指定的根节点代码,说明它是根节点
    }
  });
  return result;
}

这个函数接受两个参数:

  • arr:要转换的一维数组。
  • rootParentCode:指定的根节点代码。如果某个节点的 ParentCode 等于这个值,那么它就是根节点,否则它将成为某个节点的子节点。
    使用示例:

const arr = [
  { ID: 1, ParentCode: 0, name: 'A' },
  { ID: 2, ParentCode: 1, name: 'B' },
  { ID: 3, ParentCode: 1, name: 'C' },
  { ID: 4, ParentCode: 2, name: 'D' },
  { ID: 5, ParentCode: 4, name: 'E' },
  { ID: 6, ParentCode: 3, name: 'F' },
];
const tree = convertToTree(arr, 0);
console.log(tree);

上面的代码将输出以下结果:


[
  {
    ID: 1,
    ParentCode: 0,
    name: 'A',
    children: [
      { ID: 2, ParentCode: 1, name: 'B', children: [{ ID: 4, ParentCode: 2, name: 'D', children: [{ ID: 5, ParentCode: 4, name: 'E', children: [] }] }] },
      { ID: 3, ParentCode: 1, name: 'C', children: [{ ID: 6, ParentCode: 3, name: 'F', children: [] }] },
    ],
  },
]

这个结果表示有一个根节点 A,它有两个子节点 B 和 C。B 有一个子节点 D,D 有一个子节点 E。C 有一个子节点 F。

喜欢