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

Question

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

假设树的深度为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: []
          }
        ]
      }
    ]
  }
]

Answer 1

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

Answer 2

function treeFilter (tree, func) {
  return tree.map(node => ({ ...node })).filter(node => {
    node.children = node.children && treeFilter(node.children, func)
    return func(node) || (node.children && node.children.length)
  })
}

测试：

const result = treeFilter(treeData, node => ids.includes(node.id))

更多树操作: https://wintc.top/article/20