关于js递归的问题？

Question

在处理树形数组时，只会写那种不是带返回值的递归

function setChildrenLevel(data, level, bgStyle){
    data.senLevName = level
    data.bgStyle = bgStyle
    if(data.children && data.children.length){
        data.children.forEach(item=>{
            setChildrenLevel(item, level, bgStyle)
        })
    }
}
var data = {
    name: 1,
    children:[
        {
            name: 2,
            children: [
                {
                    name: 3
                }
            ]
        },
        {
            name: 4,
        }
    ]
}
function setChildrenLevel(data, level, bgStyle){
    data.senLevName = level
    data.bgStyle = bgStyle
    if(data.children && data.children.length){
        data.children.forEach(item=>{
            setChildrenLevel(item, level, bgStyle)
        })
    }
}
setChildrenLevel(data, 4, 'red')
console.log(data)

如何写那种是return的递归去处理树形数组,有什么模板吗？

Answer 1

你这种递归修改数据的是不需要返回值的，如果你要复制一份，直接深度克隆 data 就可以了。
带返回值的比如这种——

    _getPlaceWrap({ children }) {
        let res = null;
        for(const child of children) {
            if(child.isMateList) {
                res = child;
                break;
            }
            res = _getPlaceWrap(child)
        }
        return res
    }

它的功能是找到对象树中的有 isMateList 标记的第一个元素，找到之后会层层返回。
当然，我这个 isMateList 只有一个，所以直接深度遍历找到它就可以了，如果是有多个目标的话，是不能 break 的，对应的 res 也应该换成数组或者对象以便存储所有返回值：

    _getPlaceWrap({ children }, res = []) {
        for(const child of children) {
            if(child.isMateList) {
                res.push(child);
            }
            _getPlaceWrap(child, res);
        }
        return res
    }

Answer 2

var data = {
    name: 1,
    children:[
        {
            name: 2,
            children: [
                {
                    name: 3
                }
            ]
        },
        {
            name: 4,
        }
    ]
};

function setChildrenLevel(data, level, bgStyle){
   return data.map((item)=>{
       item.senLevName=level;
      item.bgStyle=bgStyle;
      setChildrenLevel(item.children||[], level, bgStyle);
      return item;
 })
}

setChildrenLevel([data], 4, 'red');

结果

{
  "name": 1,
  "children": [
    {
      "name": 2,
      "children": [
        {
          "name": 3,
          "senLevName": 4,
          "bgStyle": "red"
        }
      ],
      "senLevName": 4,
      "bgStyle": "red"
    },
    {
      "name": 4,
      "senLevName": 4,
      "bgStyle": "red"
    }
  ],
  "senLevName": 4,
  "bgStyle": "red"
}