JS 无限分类树

一、 常用的JS无限分类。

常用无限分类，一般存在两种情况，一种是存储在children 子节点当中。一种是利用level层级排序的方式进行手动分类。前者在组件与其他插件当中使用较多，后者在下拉框组件当中使用的挺多的。

自己呢，从事的是后端语言开发，往常在后端使用PHP引用的特性，第一种方式和第二种都是很容易就可以实现。最近在是用vue进行前端开发。在使用树组件的时候就遇到了这个问题。记录下自己做数据处理的想法与步骤。

• 储存children当中

思路：使用while 循环进行处理。首先进行两两之间的添加children之后将最下层的叶子删除，然后继续循环处理，直至只剩下顶层节点。

 treeData(treeData) {
        let j = 0;
          let baseSize =new Set();
          while (true) {
              let size = treeData.length;
              let a = false;  //元素删除控制位
              if (size <= 1 || !treeData[j] || size == baseSize.size) {
                  break;
              }
              if (treeData[j].pid == 0) {
                  baseSize.add(treeData[j].id);
              }
              for (let i = 0; i < size; i++) {
                  treeData[i].title = treeData[i].name;
                  if (treeData[i].pid == treeData[j].id) {
                      a = true;
                  }
                  //解决数据位置顺序错乱导致误删
                  if (treeData[i].id == treeData[j].pid) {
                      if (!treeData[i].hasOwnProperty('children')) {
                          treeData[i].children = [];
                      }
                      treeData[i].children[treeData[j].id] = treeData[j];
                  }
              }
              if (!a && treeData[j].pid != 0) {
                  treeData.splice(j, 1);
              }
              j++;
              if (j >= size - 1) {
                  j = 0;
              }    
          }
          return treeData;
      }

• 第二种通过level来进行分类

  treeMenu(tree, pid, level) {
            for (var i = 0; i < tree.length; i++) {
                if (tree[i].pid == pid) {
                    let item = tree[i];
                    tree[i].level = level;
                    this.selectData.push(tree[i]);
                    this.treeMenu(tree, item.id, level + 1);
                }
            }
            return this.selectData;
        }

好了，虽然说代码不多，但碍于对JS的理解不太多，导致花的时间较多。需要说明一个问题就是，在vue里调用这两个方法时要注意顺序问题，不知道vue内容对数组处理是不是基于引用进行的。如果这两个方法最原始的数组对象是同一个的话，先调用第一个方法，再调用第二个话，可能达不到自己想要的结果。

最后在vue里面一定要注意，JS变量深拷贝和浅拷贝的问题，对于对象或者数组类型的话，最好进行深拷贝。