Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

如何获取树结构中指定节点数据,并且保持原有层级结构?

获取树结构中指定节点数据,并且保持原有层级结构?

假设树的深度为3,按照id列表去遍历匹配,如果二级节点有children那么就从三级节点进行过滤,如果没有就从当前二级节点进行过滤,过滤掉不匹配的节点,并且保留原有层级结构。

问题出现的环境背景及自己尝试过哪些方法

项目中遇到的问题,自己尝试遍历进行解决,但始终保持不了原有结构不变化。遂来进行请教各路大神。

相关代码

现有tree数据如下

let ids = [11, 100, 200]; // 要获取的 id 列表
let treeData = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          },
          {
            id: 101,
            name: '1-1-2',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      },
      {
        id: 12,
        name: '1-3',
        children: [
          {
            id: 103,
            name: '1-3-1',
            children: []
          },
          {
            id: 104,
            name: '1-3-2',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      },
      {
        id: 21,
        name: '2-2',
        children: []
      }
    ]
  }
];

你期待的结果是什么?实际看到的错误信息又是什么?

期望输出如下结果

let ids = [11, 100, 200]; // 要获取的 id 列表
let res = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      }
    ]
  }
]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
var ids = [11, 100, 200]; // 要获取的 id 列表
var treeData = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          },
          {
            id: 101,
            name: '1-1-2',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      },
      {
        id: 12,
        name: '1-3',
        children: [
          {
            id: 103,
            name: '1-3-1',
            children: []
          },
          {
            id: 104,
            name: '1-3-2',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      },
      {
        id: 21,
        name: '2-2',
        children: []
      }
    ]
  }
];

function filter(list, cb) {
  return list.reduce((res, item) => {
    if(item.children && item.children.length) {
      var children = filter(item.children, cb);
      if(children.length) res.push({...item, children});
    } else if(cb(item)) res.push(item);
    return res;
  }, []);
}

filter(treeData, item => ids.includes(item.id))

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...