问答

如何优雅地递归获取 树形数组的每个同级第一层数据

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

比如有如下数组 let data = [{ id: 4, name: "沙发类", children: [{ id: 41, name: "布艺沙发", children: [{ id: 411, name: '布艺沙发411', }, { id: 412, na...

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

比如有如下数组

let data = [{
      id: 4,
      name: "沙发类",
      children: [{
          id: 41,
          name: "布艺沙发",
          children: [{
            id: 411,
            name: '布艺沙发411',
          }, {
            id: 412,
            name: '布艺沙发412'
          }]
        },
        {
          id: 42,
          name: "充气沙发"
        },
        {
          id: 43,
          name: "懒人沙发"
        }
      ]
    },{
      id: 5,
      name: "木床类",
    }]

第一层的第一个数据 id 为 4 第二层的第一个数据 id 为 41 第三层的第一个数据 id 为 411
期望的结果

[{id:4},{id:41},{id:411}]

自己写了个 但是总感觉有 bug

getFirstIdList(arr = []) {
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    res.push({id:item.id});
    if (item.children) {
      res = res.concat(getFirstIdList(item.children));
    }
    break;
  }
  return res;
}
getFirstIdList(data)

请教各位大佬是否有更优雅的方式,或者 lodash 这种第三方库是否有提供?

###
function getIdList (list) {
  const result = []
  while (list && list.length) {
    result.push({ id: list[0].id })
    list = list[0].children
  }
  return result
}
###

可以简单地氛围3个步骤,
1.平铺所有的节点
2.过滤其中的 1 级节点
3.过滤其中子节点中的第一个

// 实现数组的平铺
// 并且添加标识表示第一级
function ArrayFlat(arr){
    return arr.map(item => {
        return item.children ? 
            [ArrayFlat(item.children).map(node => {
                node.isChild = true;
                return node
            }), item].flat() : item
    }).flat()
}
// 过滤数据和格式化输出结果
ArrayFlat(data).filter(item => !item.isChild || new RegExp(/[\d]+?1$/).test(item.id)).map(item => { return { id: item.id } })

###

你的问题本质上是线性,与树关系并不大,基本上若哪层首节点没后代,也就终结了,表现形式如下。
image.png

###
function getData (list) {
    let result = []
    if(list && list.length>0){
        result.push({id: list[0].id})
        let child = getData(list[0].children)
        for (let c of child){
            result.push(c)
        }
    }
    return result
}

console.log(getData(data))

image.png

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

相关文章
  • 如何优雅地递归获取 树形数组的每个同

    如何优雅地递归获取 树形数组的每个同

  • vue  tab 左右滚动高亮 需求

    vue tab 左右滚动高亮 需求

  • Warning: call_user_func_array() expe

    Warning: call_user_func_array() expe

  • 关于 redis的watch

    关于 redis的watch

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