一、 常用的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变量深拷贝和浅拷贝的问题，对于对象或者数组类型的话，最好进行深拷贝。
