求star

开源不易,喜欢请点个star吧

Ocean Han
533 字
3 分钟
JS实现数组转树形结构
2023-05-24

数组 ==> 树形结构#

TIP

思路:

  1. idkey,创建一个map映射,用来查找parent
  2. 遍历原数组,通过parentIdmap中找到父节点,然后插入到父节点的children
WARNING

注意:对象是引用类型,所以map中的对象改变,原数组也会改变,如果想要原数组不变,可以先进行深拷贝,然后再处理

// 实现一个方法,将下列数组转化为树形结构 
const nodes = [
  { id: 3, name: '节点C', parentId: 1 },
  { id: 6, name: '节点F', parentId: 3 },
  { id: 0, name: 'root', parentId: null },
  { id: 1, name: '节点A', parentId: 0 },
  { id: 8, name: '节点H', parentId: 4 },
  { id: 4, name: '节点D', parentId: 1 },
  { id: 2, name: '节点B', parentId: 0 },
  { id: 5, name: '节点E', parentId: 2 },
  { id: 7, name: '节点G', parentId: 2 },
  { id: 9, name: '节点I', parentId: 5 }
];

/**
 * @desc 将数组转化为树形结构 
 * @param {Array} data 待转换的数组
 */
const convertToTree = (data) => {
  let result;
  let map = {};
  data.forEach(item => {
    map[item.id] = item;
  });
  data.forEach(item => {
    let parent = map[item.parentId];
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
    } else {
      // parentId为null说明是根节点,直接将其返回即可
      result = item;
    }
  });
  return result;
};

树形结构 ==> 一维数组#

const treeData = {
  id: 0,
  name: 'root',
  parentId: null,
  children: [
    {
      id: 1, name: '节点A', parentId: 0, children: [
        {
          id: 3, name: '节点C', parentId: 1, children: [
            { id: 6, name: '节点F', parentId: 3, children: [] }
          ]
        },
        {
          id: 4, name: '节点D', parentId: 1, children: [
            { id: 8, name: '节点H', parentId: 4, children: [] }
          ]
        }
      ]
    },
    {
      id: 2, name: '节点B', parentId: 0, children: [
        {
          id: 5, name: '节点E', parentId: 2, children: [
            { id: 9, name: '节点I', parentId: 5, children: [] }
          ]
        },
        { id: 7, name: '节点G', parentId: 2, children: [] }
      ]
    },
  ]
};
/**
 * @desc 树形结构数据转为一维数组
 * @param {Tree} data 树形结构的数据
 * @returns {Array}
 */
const TreeToArr = (data) => {
  if (!data.children) {
    return data;
  }
  const res = [];
  const traversalChildren = (children) => {
    children.forEach(item => {
      if (item.children) {
        traversalChildren(item.children);
        delete item.children;
      }
      res.push(item);
    });
  };
  traversalChildren(data.children);
  // 添加根节点
  delete data.children;
  res.push(data);
  return res;
};
JS实现数组转树形结构
https://blog.oceanh.top/posts/frontend/js实现数组转换为树形结构/
作者
Ocean Han
发布于
2023-05-24
许可协议
CC BY-NC-SA 4.0
最后修改时间
2024-08-10 10:08:49