一维数组转树，无限层级，代码已优化，可直接使用

经过几次优化，已经达到了我所能达到的最优解，特写出代码优化的过程，记录自己的成长，想复制代码的直接跳转文末,本方法在循环过程中添加了索引，不需要的可自行删除

• 例如：

1.-----
  1-1.-----
  1-2.---
2.---
  2-1.---
    2-1-1---
    2-1-2---
    2-1-3---
  2-2.---
    2-2-1---

路漫漫其修远兮，吾将上下而求索。

树中循环是避免不了的，只能尽量减少少循环，代码仅供交流，并不是最优解

• 方法是用vue实现的，element-ui的Tree树形组件有bug，会导致click事件丢失，从而无法添加数据
• 本代码实现了增删的方法，修改也是拿到index，通过index去修改list中的数据
• 索引没什么用，使用只会影响性能，但是没有办法，产品设计这样，只能单独递归渲染
• 优化项很多，比如将计算索引的方法提取出来，在添加和删除阶段计算好，删除的时候通过父级只重新计算兄弟级的索引，这样可以节省性能
• 我这里是只要发生变化，就会重新计算整个树的数据
• 因为删除的时候只是删除了父级，所以会有脏数据，但是树的数据是干净的，提交到服务器的时候需要将树重新转换为1维数组
• id是数据库的默认主键字段，在这里却是非常重要的父子级依赖关系，如果和服务端冲突需要替换为其他字段
• 实际开发中这个逻辑由服务端实现比较好，但如果服务端不想写，那只能由前端完成
• 数据格式应由服务端规定，免得生成的数据无法使用
• 最好的结果就是每次增删改查一条数据都调用服务端接口
• 前端实现时为了避免新增了半天的数据因为不小心刷新页面而丢失，可使用localStorange，在提交之后再将数据清除

下面HTML是示例代码，可将其中arrToTree方法替换，可以在浏览器直接打开运行

  
    
    
    
    
    
    
    
    
  
  
    

      {{ message }}
      
use scoped slot
      add
      
        
          {{ node.label }}
          
            
              Append
            
            
              edit
            
            
              Delete
            
          
        
      
      
        
        
        
        
         
        
          
        
      
    
    
  

二次优化

• 优化思路，既然递归可以将索引循环出来，那么就可以将遍历子级的代码放在递归中实现，代码如下：
• 去掉之前冗余的写法，将arrToTree方法改造一下
• 既然map循环中只用到了第一层，那么只需要将第一层父级过滤出来即可
• 最后将查找子级的方法放在递归方法中

  // 改造后的 arrToTree方法
       arrToTree(arr) {
            // 克隆数组避免引用引起原数组变化
            arr = JSON.parse(JSON.stringify(arr));
            // 去掉之前冗余的写法，将第一层父级过滤出来
            const menu = arr.filter((item) => item.pid == 0);
            // 正向循环渲染number 递归重新计算number
            return menu.map((item,index) => {
                item.number=`${index+1}`
                item.label = item.label+item.number
                return this.setChildrenIndex(item)
            });
          },
          // 改造后的 setChildrenIndex方法
          setChildrenIndex(params) {
            // 添加了寻找子级的方法
            let list = arr = JSON.parse(JSON.stringify(this.list));
            params.children = arr.filter((item) => item.pid == params.id);
            if (params.children && params.children.length) {
              params.children.forEach((item, index) => {
                item.number = params.number + "-" + (index + 1);
                item.label = item.label + item.number;
                this.setChildrenIndex(item);
                return item;
              });
            }
            return params;
          },

三次优化

• 优化思路，既然递归可以实现将一维数组转树的需求，那么只需要将arrToTree和setChildrenIndex的方法合并成一个方法即可
• 为了寻找它的子级，我们需要知道最先开始的父级id，所以递归方法中需要多一个参数pid
• 添加索引参数，方便子级拼接

         arrToTree(list, pid = 0, str = "") {
            // 克隆数组避免引用引起原数组变化
            if (!pid) list = JSON.parse(JSON.stringify(list));
            let result = list.filter((item) => item.pid == pid);
            return result.map((item,index) => {
              item.number = `${str ? str + "-" : str}${index + 1}`;
              item.label = item.label + item.number
              item.children = this.arrToTree(list, item.id, item.number);
              return item
            });
          },

其他解法

• 朋友写的，一维数组转树

function disposeTree(data = [], id = "id", pid = "pid", childKey = "children") {
  data = [...data];
  //父节点映射
  let nodesMap = {};
  // 找出所有的根节点
  let rootNodes = data.filter((item) => {
    let parentId = item[pid];
    if (parentId) {
      nodesMap[parentId] = (nodesMap[parentId] || []).concat(item);
      return false;
    }
    return true;
  });
  console.log(rootNodes);
  console.log(nodesMap);
  // 找出根节点下面所有的子节点
  const compose = (list) => {
    return list.map((item) => {
      let children = nodesMap[item[id]];
      return children
        ? {
            ...item,
            [childKey]: compose(children),
          }
        : item;
    });
  };
  return compose(rootNodes);
}

• 朋友写的，树形数据展开

/**
 * 树转数组
 */
export function flatTree(dataSource, childKey = 'children'){
    let results = [];
    const flat = (data) => {
        data = data || [];  //对特殊值null,undefined处理
        data.forEach(item => {
            let children  = item[childKey];
            delete item[childKey];
            results.push(item);
            flat(children)
        });
    }
    flat(dataSource);
    return results;
}

优秀的程序员不在于他写了多少行代码，而在于用简单的方式去解决问题，编程是一种艺术，好的代码根据优化和重构，可以将复杂的问题简单化