关于js树形方法封装的心得

2022-06-24 15:06:27 阅读：226 来源： 互联网

标签：封装 cur parent menu js item 树形 const id

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
   <div class="app"></div>
</body>
  <script>
  let Arr=[
      {
        id: '1',
        menu_name: '设置',
        menu_url: 'setting',
        parent_id: 0
      }, {
        id: '1-1',
        menu_name: '权限设置',
        menu_url: 'setting.permission',
        parent_id: '1'
      }, {
        id: '1-1-1',
        menu_name: '用户管理列表',
        menu_url: 'setting.permission.user_list',
        parent_id: '1-1'
      }, {
        id: '1-1-2',
        menu_name: '用户管理新增',
        menu_url: 'setting.permission.user_add',
        parent_id: '1-1'
      }, {
        id: '1-1-3',
        menu_name: '角色管理列表',
        menu_url: 'setting.permission.role_list',
        parent_id: '1-1'
      }, {
        id: '1-2',
        menu_name: '菜单设置',
        menu_url: 'setting.menu',
        parent_id: '1'
      }, {
        id: '1-2-1',
        menu_name: '菜单列表',
        menu_url: 'setting.menu.menu_list',
        parent_id: '1-2'
      }, {
        id: '1-2-2',
        menu_name: '菜单添加',
        menu_url: 'setting.menu.menu_add',
        parent_id: '1-2'
      }, 
      {
        id: '2',
        menu_name: '订单',
        menu_url: 'order',
        parent_id: 0
      }, {
        id: '2-1',
        menu_name: '报单审核',
        menu_url: 'order.orderreview',
        parent_id: '2'
      }, {
        id: '2-2',
        menu_name: '退款管理',
        menu_url: 'order.refundmanagement',
        parent_id: '2'
      }
  ]
  

  console.log(Arr)
  const t0 = performance.now();
  let treeList = Arr.reduce((prev, cur) => {
              prev[cur['id']] = cur;
              return prev
          }, {})
  console.log(treeList)
  //通过引用类型原理实现  
  let result = Arr.reduce((prev, cur) => {
          let pid = cur.parent_id;
          // pid为0的就找不到父对象，找到当前cur的父对象
          // 对象的浅拷贝，引用关系存在，在后面处理parent的时候也会导致cur的改变，达到递归的效果
          let parent = treeList[pid]
              // console.log(parent,1)
              // 如果父对象存在，就将cur压到父对象的children属性中
          if (parent) {
              // parent和cur存在引用关系
              parent.children ? parent.children.push(cur) : parent.children = [cur]
          } else if (pid === 0) {
              // 没有父对象，则此cur为树的根元素
              prev.push(cur)
          }
          return prev
      }, [])
  const t1 = performance.now();
  console.log(t1 - t0, 'milliseconds');
  console.log(result)



  function toTree2(data) {              
    let result = [];              
    let obj = {};              
    data.forEach(item => {                 
      obj[item.id] = Object.assign(item, obj[item.id] || {});                
      if (item.parent_id) {                    
        let parent = obj[item.parent_id] || {};        
        parent.child = parent.child || [];                     
        parent.child.push(item);                
        obj[item.parent_id] = parent;                
      } else {                    
        result.push(obj[item.id])              
      }            
    })              
    return result;           
  }  
  const t3 = performance.now();
  console.log(toTree2(Arr))
  const t4 = performance.now();
  console.log(t4 - t3, 'milliseconds');




  function toTree3(items) {
    const result = [];   // 存放结果集
    const itemMap = {};  // 
    for (const item of items) {
      const id = item.id;
      const parent_id = item.parent_id;

      if (!itemMap[id]) {
        itemMap[id] = {
          children: [],
        }
      }

      itemMap[id] = {
        ...item,
        children: itemMap[id]['children']
      }

      const treeItem =  itemMap[id];

      if (parent_id === 0) {
        result.push(treeItem);
      } else {
        if (!itemMap[parent_id]) {
          itemMap[parent_id] = {
            children: [],
          }
        }
        itemMap[parent_id].children.push(treeItem)
      }

    }
    return result;
  }
  const t5 = performance.now();
  console.log(toTree3(Arr))
  const t6 = performance.now();
  console.log(t6 - t5, 'milliseconds');

  </script>
</html>

三种不同封装方式，性能有很大差异，可以自己在本地跑起来测试

标签：封装,cur,parent,menu,js,item,树形,const,id
来源： https://www.cnblogs.com/wuxu-dl/p/16408861.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于js树形方法封装的心得