js 处理树形数据

最新推荐文章于 2024-09-13 23:50:28 发布

南桥追光

最新推荐文章于 2024-09-13 23:50:28 发布

阅读量225

点赞数

分类专栏：工具类

本文链接：https://blog.csdn.net/qq_34122822/article/details/109613092

版权

工具类专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍两种将扁平化的数据转换为树形结构的方法。第一种方法通过递归地检查每个节点的父节点ID来构建层级关系，并标记层级深度。第二种方法使用函数式编程方式，通过查找具有相同父ID的子项来动态填充子节点列表。

摘要由CSDN通过智能技术生成

方案一

export const generateTree = (data, id = 'id', parentId = 'parentId') => {
  var result = [];
  var idMap = {};
  for (var i = 0; i < data.length; i++) {
    idMap[data[i][id]] = data[i];
  }
  for (var i = 0; i < data.length; i++) {
    if (idMap[data[i][parentId]] && data[i][id] !== data[i][parentId]) {
      if (!idMap[data[i][parentId]]['children']) {
        idMap[data[i][parentId]]['children'] = [];
      }
      if (!idMap[data[i][parentId]]['_level']) {
        idMap[data[i][parentId]]['_level'] = 1;
      }
      data[i]['_level'] = idMap[data[i][parentId]]._level + 1;
      idMap[data[i][parentId]]['children'].push(data[i]);
    } else {
      result.push(data[i]);
    }
  }
  return result;
}

方案二

const getChildren = (data) => {
  return function (item) {
    const arr = [];
    data.forEach((value) => {
      if (value.pId === item.id) {
        arr.push(value);
      }
    });
    return arr;
  };
};

export const generateTree = (data) => {
  const arr = [];
  data.map((item) => {
    const list = getChildren(data)(item);
    if (list.length > 0) {
      item["children"] = list;
    }
    if (item.pId === 0) {
      arr.push(item);
    }
  });
  return arr;
};