问答

js/vue/react 如何转换这种树形结构(可能有点复杂)

作者:admin 2021-05-06 我要评论

如图所示,这树形结构目前对应的代码是↓ const data = [{ name: '桑椹', id: '114' }, { name: '黑莓', id: '115' }, { name: '柑橘类', id: '116', children: ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image
如图所示,这树形结构目前对应的代码是↓

const data = [{
        name: '桑椹',
        id: '114'
      }, {
        name: '黑莓',
        id: '115'
      }, {
        name: '柑橘类',
        id: '116',
        children: [{
          name: '橘子',
          id: '117'
        }, {
          name: '橙子',
          id: '118'
        }]
      },
      {
        name: '奥特曼大全',
        id: '119',
        children: [{
          name: '昭和类',
          id: '120',
          children: [{
            name: '杰克',
            id: '121'
          }, {
            name: '泰罗',
            id: '122'
          }, {
            name: '艾斯',
            id: '123'
          }]
        }, {
          name: '平成类',
          id: '124',
          children: [{
            name: '迪迦',
            id: '125'
          }, {
            name: '盖亚',
            id: '126'
          }]
        }]
      }]

我需要的效果是,如果没有父级,那就放进一个对象里,如果有子级,那就判断有几个子级,也就是children里面还有没有children,如果有,那就也一起放入那个对象里,如果只有一层children,同样的这一层children也放入那个对象里。

理想输出效果↓

let data = [{
          name: '草莓',
          id: '113'
        }, {
          name: '桑椹',
          id: '114'
        }, {
          name: '黑莓',
          id: '115'
        }, {
          name: '橘子',
          id: '117'
        }, {
          name: '橙子',
          id: '118'
        }, {
          name: '杰克',
          id: '121'
        }, {
          name: '泰罗',
          id: '122'
        }, {
          name: '艾斯',
          id: '123'
        }, {
          name: '迪迦',
          id: '125'
        }, {
          name: '盖亚',
          id: '126'
        }]

图示意↓
image
难点在于,桑葚和黑莓是没有父级子级的,而有的有一层父级(如橘子、橙子)、有的有两层父级,所以用

data.map(item => item.children.map(child => child.children)).flat(Infinity)

这段代码是没有用的,我该怎么操作呢~!

在这里先谢谢各位大神大哥们的解答,小弟感激不尽!

感谢@zangeci @gentlecoder945两位大神的解答,但是你们的代码我试了一下都有这个问题
image
橘子和橙子都重复了,请问下该怎么解决呢

###

递归,这种问题第一直觉一般就是递归

var data = [{
        name: '桑椹',
        id: '114'
      }, {
        name: '黑莓',
        id: '115'
      }, {
        name: '柑橘类',
        id: '116',
        children: [{
          name: '橘子',
          id: '117'
        }, {
          name: '橙子',
          id: '118'
        }]
      },
      {
        name: '奥特曼大全',
        id: '119',
        children: [{
          name: '昭和类',
          id: '120',
          children: [{
            name: '杰克',
            id: '121'
          }, {
            name: '泰罗',
            id: '122'
          }, {
            name: '艾斯',
            id: '123'
          }]
        }, {
          name: '平成类',
          id: '124',
          children: [{
            name: '迪迦',
            id: '125'
          }, {
            name: '盖亚',
            id: '126'
          }]
        }]
      }]

function mapLastChild(list) {
  return list.reduce((res, item) => {
    if(item.children) res = res.concat(mapLastChild(item.children))
    else res.push(item);
    return res;
  }, []);
}

mapLastChild(data)
###
const flatTree = (list) =>
  list.reduce((acc, cur) => {
    if (!cur.children) {
      acc.push(cur)
      return acc
    } else {
      return acc.concat(flatTree(cur.children))
    }
  }, [])
###

一个问题三个踩,也是6,估计很多大佬看到这种日经题就烦,同样惹人厌的可能还有千篇一律的异步顺序题。
这题我看干脆用正则得了:

const { parse } = JSON;
JSON.stringify(data).match(/(\{"name":"[^"]+","id":"[^"]+"\})|("id":"[^"]+"\},\{"name":"[^"]+")/g).map(parse);

一行代码搞定。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js/vue/react 如何转换这种树形结构(

    js/vue/react 如何转换这种树形结构(

  • js怎么关闭websocket,websocket.close

    js怎么关闭websocket,websocket.close

  • gin swag 同一个接口可以传入不同结构

    gin swag 同一个接口可以传入不同结构

  • netty中客户端发送消息到不了服务端

    netty中客户端发送消息到不了服务端

腾讯云代理商
海外云服务器