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

Z时代
2024-01-10
分类：技术分享

比如有如下数组

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 } })

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