不用递归实现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组件看下效果，如图：

不用递归的实现

代码

const initTreeData2 = (data = []) => {
  const resDta = []
  const resMap = {}
  for (const item of data) {
    if (!resMap[item.id]) {
      item.children = []
      resMap[item.id] = item
    }

    if (item.parentId === 0) {
      resDta.push(resMap[item.id])
    } else {
      if (resMap[item.parentId]) {
        resMap[item.parentId].children.push(item)
      }
    }
  }
  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 = initTreeData2(arr)
console.log(treeData)
console.timeEnd("start") // start: 8.51611328125 ms
复制代码

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

思路

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