demo的你们可以举一反三,未来的工作过程中遇到递归算法,可

序言

在咱们实施过程中，难免会出现前面赋值解决树结构，此刻很多人都想到递归算法，递归算法常常提到，在具体开发设计中我们真的可以表达出来递归算法吗？递归这个概念不用多说，定义讲这么多有什么用，最重要的是实际应用，下边直接去demo，带着大家去了解递归算法，期待看了demo的你们可以举一反三，未来的工作过程中遇到递归算法，可灵活“照猫画虎”画出来的大伙儿需要格式~

demo1

数据信息

后面传出去的二维数组为：

这一二维数组中children的等级，也都不确定性，假如我们接受到这样一个树结构数据信息，要做一个自己写的勾选框，下面需要做的解决是：应该给每一层有id属性目标里边放一个checked=false特性

递归算法塞checked=false

handleData = (sendArr) => {            
 sendArr.forEach((item) => {                
  item.checked = false;                
  if (item.children && item.children.length) {                    
   this.handleData(item.children);                
   }            
 });        
}

启用更改原先二维数组

handleData(arr)

这时arr已经成为了大家想要的结果，若是在vue中，那样我们应该深拷贝，编码如下所示

let newArr = JSON.parse(JSON.stringify(arr))
handleData(newArr)
arr = JSON.parse(JSON.stringify(newArr))

依据id，掌握到现阶段id所属的对象，把要对象checked取反

由于我们的需求是勾选框，因此当用户点击该原素时，我们能掌握到现阶段点一下元素id，那我们要做的就是掌握到现阶段id所属的对象，把要对象checked取反，编码如下所示：

findIdFunc(sendArr, id) {            
 if (sendArr && sendArr.length) {                
  for (let item of sendArr) {                    
   if (item.id== id) {                        
    item.checked = !item.checked;                        
    return;                    }                    
   if (item.children && item.children.length) {                        
     this.findIdFunc(item.children, id);                    
    }                
   }            
 }        
}

启用,进行实际效果

findIdFunc(arr, 3333)

同上边，若是在vue新项目里没有变化，那我们就深拷贝

let newArr = JSON.parse(JSON.stringify(arr));
this.findIdFunc(newArr, 3333);
arr = JSON.parse(JSON.stringify(newArr));

demo2

demo1我认为是最基本的demo，下面就让我们要求不会改变的前提下，只更改算法设计，来试一试吧~

数据信息

此次数据信息确实原先的前提下，child或是child，里边能够套好多次，随后多了一个list，在其中list中才是交通要塞checked=false的区域，说到这里的朋友们可以自己出手，依据demo1，看看能不能解决这一数据类型呀~

建立模型（塞checked=false）

大家还是和以前一样，先往list数组对象里装checked=false

selfFunc = (porpsArr) => {  
 porpsArr.forEach(propsItem => {    
  if (propsItem.list?.length) {      
   propsItem.list.forEach(lItem => {        
    lItem.checked = false;      
   })    
  }    
  if (propsItem.child?.length) {      
   selfFunc(propsItem.child)    
  }  
 })
}
//启用
selfFunction(arr) //启用还是和以前一样,没有效果的就拿深拷贝

依据id，掌握到现阶段id所属的对象，把要对象checked取反

findIDFunc = (propArr, id) => {  
 if (propArr?.length) {    
  for (let propsItem of propArr) {  //这儿应用for of 还可以在寻找以后退出循环      
   if (propsItem.list?.length) {        
    for (let item of propsItem.list) {         
     if (item.id == id) {                item.checked = !item.checked            
      return;          
     }        
   }      
 }      
   findIDFunc(propsItem.child, id)    
  }  
 }
}
//启用
findIDFunc(arr, '22') //启用还是和以前一样,没有效果的就拿深拷贝

末尾

看过这俩demo，想必大家递归算法有了实践经验，能够保存起来，在工作上碰到要递归算法时，看这两个demo，照猫画虎就阔以啦~~后边我在和大伙儿梳理，分享一下在vue部件中应用递归算法部件，其实就是元件的递归算法