在嵌套的任何级别上收集对象值

Question

这是目前的情况。

    const pathesToFetch = tree.reduce((acc, { children }) => {
      const paths = children
        .filter((o) => o.type === "file")
        .map((o) => o.path);
      return [...acc, ...paths];
    }, []);

这是我的数组，但嵌套级别可以任意。

const tree = [{
    id: 1,
    name: "Inventory",
    type: "directory",
    path: "storage/inventory/",
    children: [{
      id: 2,
      name: "inventory.yaml",
      type: "file",
      path: "storage/inventory/inventory.yaml",
    }, ],
  },
  {
    id: 3,
    name: "UI",
    type: "directory",
    path: "storage/ui/",
    children: [{
        id: 10,
        name: "config.js",
        type: "file",
        path: "storage/ui/config.js",
      },
      {
        id: 13,
        name: "gulpfile.js",
        type: "file",
        path: "storage/ui/gulpfile.js",
      },
    ],
  },
];

目的是在对象类型为“文件”的情况下获取数组中每个对象的路径（“路径”属性）。

问题是：如果对象在数组深处，我无法获取路径数据。

例如，如果数组中的对象如下所示 - 我无法获取“路径”：

{
  id: 42,
  name: "ports.detail.entity",
  type: "directory",
  path: "storage/UI/model/viewmodel/ports.detail.entity/",
  children: [
    {
      id: 43,
      name: "ethernetports.detail.entity",
      type: "directory",
      path:
        "storage/UI/model/viewmodel/ports.detail.entity/ethernetports.detail.entity",
      children: [
        {
          id: 44,
          name: "general.tab.js",
          type: "file",
          path:
            "storage/UI/model/viewmodel/ports.detail.entity/ethernetports.detail.entity/general.tab.js",
        },
      ],
    },
  ],
};

结果应该是这样的

result = [
  "storage/inventory/inventory.yaml",
  "storage/ui/config.js",
  "storage/ui/gulpfile.js"
]

Answer 1

您可以只使用 reduce 方法并创建一个递归函数。

const data = [{"id":42,"name":"ports.detail.entity","type":"directory","path":"storage/UI/model/viewmodel/ports.detail.entity/","children":[{"id":43,"name":"ethernetports.detail.entity","type":"directory","path":"storage/UI/model/viewmodel/ports.detail.entity/ethernetports.detail.entity","children":[{"id":44,"name":"general.tab.js","type":"file","path":"storage/UI/model/viewmodel/ports.detail.entity/ethernetports.detail.entity/general.tab.js"}]}]}]
const data2 = [{"id":1,"name":"Inventory","type":"directory","path":"storage/inventory/","children":[{"id":2,"name":"inventory.yaml","type":"file","path":"storage/inventory/inventory.yaml"}]},{"id":3,"name":"UI","type":"directory","path":"storage/ui/","children":[{"id":10,"name":"config.js","type":"file","path":"storage/ui/config.js"},{"id":13,"name":"gulpfile.js","type":"file","path":"storage/ui/gulpfile.js"}]}]

const getPaths = data => {
  return data.reduce((r, e) => {
    if (e.type === 'file') r.push(e.path);
    if (e.children) r.push(...getPaths(e.children))
    return r;
  }, [])
}

console.log(getPaths(data))
console.log(getPaths(data2))

在嵌套的任何级别上收集对象值

Collecting object values on any level of the nesting

javascript

arrays

recursion

reduce