递归不讲概念，只说使用的实用性讲解

前言

在我们开发过程中，难免会遇到前端遍历处理树形结构，这时候大家都想到了递归，递归经常提起，在实际开发中你真的能写出来递归吗？递归的概念不用多说了，概念讲那么多有啥用，重要的是实际使用，下面直接来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组件中使用递归组件，也就是组件的递归