不用递归实现10000json数据转成tree树形数据

利用递归实现10000条数据

代码

const initTreeData = (data = [], initAttributes = {}) => {
  const Attributes = {
    parentId: 'parentId',
    title: 'title',
    value: 'id',
    rootId: 0,
    id: 'id',
  };
  const attributes = { ...Attributes, ...(initAttributes || {}) };
  const resData = data || [];
  const tree = [];
  for (let i = 0; i < resData.length; i += 1) {
    if (resData[i][attributes.parentId] === attributes.rootId) {
      const obj = {
        ...resData[i],
        children: [],
      };
      tree.push(obj);
      resData.splice(i, 1);
      i -= 1;
    }
  }
  run(tree);
  function run(chiArr = []) {
    if (resData.length !== 0) {
      for (let i = 0; i < chiArr.length; i += 1) {
        for (let j = 0; j < resData.length; j += 1) {
          if (chiArr[i][attributes.id] === resData[j][attributes.parentId]) {
            const obj = {
              ...resData[j],
              children: [],
            };
            chiArr[i].children.push(obj);
            resData.splice(j, 1);
            j -= 1;
          }
        }

        run(chiArr[i].children);
      }
    }
  }

  return tree;
};

console.time("start")
let arr = []
for (let i = 1; i < 10001; i++) {
  arr.push({
    id: i, title: '部门' + i, parentId: i < 11 ? 0 : i - 10, key: i
  })
}
const treeData = initTreeData(arr)
console.log(treeData)
console.timeEnd("start") // 运行用的时间 start: 901.011962890625 ms

利用antd的Tree组件看下效果，如图：

不用递归的实现

代码

export const getTreeData = (
  data: any[] = [],
  initValues: { parentId: string; id: string } = {
    parentId: 'parentId',
    id: 'id',
  },
) => {
  const id = initValues.id;
  const parentId = initValues.parentId;
  // 判断对象是否有某个属性
  let getHasOwnProperty = (obj: any, property: string) =>
    Object.prototype.hasOwnProperty.call(obj, property);

  const resDta = [];
  const resMap: any = {};
  for (const item of data) {
    resMap[item[id]] = {
      ...item,
      children: getHasOwnProperty(resMap, item[id])
        ? resMap[item[id]].children
        : [],
    };
    const newItem = resMap[item[id]];
    if (!item[parentId]) {
      resDta.push(newItem);
    } else {
      if (!getHasOwnProperty(resMap, item[parentId])) {
        resMap[item[parentId]] = {
          children: [],
        };
      }
      resMap[item[parentId]].children.push(newItem);
    }
  }
  return resDta;
};


console.time("start")
let arr = []
for (let i = 1; i < 10001; i++) {
  arr.push({
    id: i, title: '部门' + i, parentId: i < 11 ? 0 : i - 10, key: i
  })
}
const treeData = getTreeData(arr)
console.log(treeData)
console.timeEnd("start") // start: 8.51611328125 ms

利用antd的Tree组件看下效果，如图：

思路

用Map结构储存数据，利用对象的引用来更新数据，减少了遍历的时间，达到了优化的最终目的