js两个树结构数据合并去重

// 这是个树节点,可能有很深
const treeData = [{
  label: '一级导航',
  path: 'path-1'
},{
  label: '二级导航',
  path: 'path-2',
  children: [{
    label: '二级导航1',
    path: 'path-2-1'
  },{
    label: '二级导航2',
    path: 'path-2-2'
  }]
}]

// 这个本来也是树节点,我给拍平了
const permission = [{
  label: '啦啦啦1',
  route: 'path-1'
},{
  label: '啦啦啦2',
  route: 'path-2'
},{
  label: '啦啦啦3',
  route: 'path-3'
},{
  label: '啦啦啦4',
  route: 'path-4'
},{
  label: '啦啦啦5',
  route: 'path-5',
  children: [{
      label: '啦啦啦5-1',
      route: 'path-5-1',
  }]
}]

// 最终处理后的结果应该是这样的
// 用treeData的label跟permission的path比

const result = [{
  label: '一级导航',
  path: 'path-1',
  meta: {
    label: '啦啦啦1'
  }
},{
  label: '二级导航',
  path: 'path-2',
  meta: {
    label: '啦啦啦2'
  }
  children: []
},{
  label: '三级导航',
  path: 'path-3',
  meta: {
    label: '啦啦啦3'
  },
  component: '如果之前的treeData上没有这个节点,需要加一个component的value,值先随便写'
},{
  label: '四级导航',
  path: 'path-4',
  meta: {
    label: '啦啦啦4'
  },
  component: '如果之前的treeData上没有这个节点,需要加一个component的value,值先随便写'
},{
  label: '五级导航',
  path: 'path-5',
  meta: {
    label: '啦啦啦5'
  },
  component: '如果之前的treeData上没有这个节点,需要加一个component的value,值先随便写'
  children: [{
      label: '五级导航1',
      path: 'path-5-1',
      meta: {
        label: '啦啦啦5-1'
    },
  component: '如果之前的treeData上没有这个节点,需要加一个component的value,值先随便写'
  }]
}]

背景:路由地址是后台管理的,路由是后台添加的(如果添加本地没有的路由,就用统一的默认模板)treeData是前端vue里的路由,permission是后台返回的路由,然后需要两个对比
1,如果treeData里有,permission里没有的,就在treeData的meta添加hidden:true或者删除掉
2,如果treeData里没有,permistion里有,则把permistion里的对象塞到treeData里
3,如果treeData里path===permission的route,则给treeData的当前对象添加meta对象,并且把permission的name赋值给meta里的label

阅读 7.6k
2 个回答
const flattenTree = (data) => {
    return data.reduce((arr, currentValue) => {
      if (currentValue.children && currentValue.children.length > 0) {
        return arr.concat(flattenTree(currentValue.children))
      } else {
        return arr.concat(currentValue)
      }
    }, [])
}

const uniqueArray = (array1, array2) => {
  return array1
      .concat(array2)
      .reduce((prev, cur) => {
          const duplicate = prev.filter(x => x.label === cur.label)
            if (duplicate.length) {
              return prev
            } else {
              prev.push(cur)
              return prev
            }
      }, [])
}
uniqueArray(flattenTree(data5, data6))

将数组扁平化后去重

function diff(d1, d2) {
    if (d1 == null && d2 == null) return false
    if (! Array.isArray(d1) || ! Array.isArray(d2)) throw "Illegal data struct."
    if (d1.length !== d2.length) return true
    for (let i in d1) {
        if (d1[i].label !== d2[i].label) return true
        if (d1[i].children ^ d2[i].children) return true
        if (diff(d1[i].children, d2[i].children)) return true
    }
    return false
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题