如何在 javascript 中过滤嵌套树对象而不丢失结构？

Question

为了在 React 中正确显示树视图，我需要过滤嵌套树对象。

我找到这篇文章： 过滤嵌套树对象而不丢失结构

但实际上我想做完全相反的事情。例如，如果在我的 filterData 函数中name === "a3“我想将对象保留为name === "a3"

const result = filterData(items, "a3")

const items = [
  {
    name: "a1",
    id: 1,
    children: [
      {
        name: "a2",
        id: 2,
        children: [
          {
            name: "a3",
            id: 3
          },
          {
            name: "a5",
            id: 4
          }
        ]
      }
    ]
  },
  {
    name: "b2",
    id: 2,
    children: [
      {
        name: "a2",
        id: 2,
        children: [
          {
            name: "a3",
            id: 3
          }
        ]
      },
      {
        name: "a4",
        id: 8
      }
    ]
  }
];

const result = [
  {
    name: "a1",
    id: 1,
    children: [
      {
        name: "a2",
        id: 2,
        children: [
          {
            name: "a3",
            id: 3
          }
        ]
      }
    ]
  },
  {
    name: "b2",
    id: 2,
    children: [
      {
        name: "a2",
        id: 2,
        children: [
          {
            name: "a3",
            id: 3
          }
        ]
      }
    ]
  }
];

Answer 1

您可以在不改变给定数据的情况下创建新对象并减少数组。

function filter(array, name) {
    return array.reduce((r, { children = [], ...o }) => {
        if (o.name === name) {
            r.push(o);
            return r;
        }
        children = filter(children, name);
        if (children.length) {
            r.push(Object.assign(o, { children }));
        }
        return r;
    }, []);
}    

var items = [{ name: "a1", id: 1, children: [{ name: "a2", id: 2, children: [{ name: "a3", id: 3 }, { name: "a5", id: 4 }] }] }, { name: "b2", id: 2, children: [{ name: "a2", id: 2, children: [{ name: "a3", id: 3 }] }, { name: "a4", id: 8 }] }];

console.log(filter(items, "a2"));
console.log(filter(items, "a3"));

.as-console-wrapper { max-height: 100% !important; top: 0; }