两个多维数组作对比，取出相同值，有什么好办法？

Question

前端设置动态路由，后端返回当前用户有权限的菜单，和前端本地路由作对比，得到该展示的路由(写了一个相同的简单的数据格式)

arr1:[
        {
          id:'1',
          title:'一',
          children:[
            {
              id:'2',
              title:'二',
              children: [
                {
                  id:'3',
                  title:'三',
                }
              ]
            }
          ]
        },
        {
          id:'4',
          title:'四',
          children:[
            {
              id:'5',
              title:'五',
              children: [
                {
                  id:'6',
                  title:'六',
                }
              ]
            }
          ]
        }
      ],
//相当于接口返回数据
arr2:[
        {
          id:'1',
          title:'一一',
          children:[
            {
              id:'2',
              title:'二二',
            }
          ]
        },
      ]，
arr3:[]

我现在的解决办法：

//扁平化数据
    const newArr2 = []
    this.arr2.forEach((item)=>{
      newArr2.push(item)
      item.children.forEach((jtem)=>{
        newArr2.push(jtem)
      })
    })
    //对比
    this.arr1.forEach((item1)=>{
      let newChildren = []
      item1.children.forEach((jtem1)=> {
        let items = newArr2.find(item2 => {
          return jtem1.id == item2.id;
        });
        if (items !== undefined){
          newChildren.push(jtem1) 
        }
      })
      let items = newArr2.find(item => {
        return item1.id == item.id;
      });
      if (items !== undefined){
        item1.children = newChildren
        this.arr3.push(item1)
      }
    })

最后得出的结果应该是arr1里的第一组数据，如果用递归的话应该怎么实现呢？

Answer 1

前后端约定好，让后端直接把路由返给你