javascript - 使用reduce对对象数组进行递归循环

Question

我有一系列带有 child 的对象。目标是从项目数组中删除每个项目。

是否可以不使用 forEach 和 map 循环？在这种情况下如何使用reduce？

问题是一些数组在一层上有项目，而另一些数组有子数组，其中有项目。示例在这里:

{
  "label": "child1",
  "children": [
    {
      "label": "child2",
      "items": [
        "item1",
        "item2"
      ]
    },
    {
      "label": "child3",
      "items": [
        "item1",
        "item2",
        "item3"
      ]
    }
  ]
}

因此，我想查看带有空项目数组的对象的变异数组。 这是一个要改变的对象:

[
  {
    "label": "parent",
    "children": [
      {
        "label": "child1",
        "children": [
          {
            "label": "child2",
            "items": [
              "item1",
              "item2"
            ]
          },
          {
            "label": "child3",
            "items": [
              "item1",
              "item2",
              "item3"
            ]
          }
        ]
      },
      {
        "label": "child4",
        "items": []
      },
      {
        "label": "child5",
        "items": ["item1","item2"]
      }
    ]
  }
]

这是我不完整的解决方案:

function flattenDeep(arr) {
  return arr.reduce(
    (acc, val) =>
      Array.isArray(val)
        ? acc.concat(flattenDeep(val.children))
        : acc.concat(val.children),
    []
  );
}

Answer 1

这是清空所有items数组的方法。

这个想法是使用预定义的reducer方法，您可以递归地使用它。

const reducer = (reduced, element) => {
  // empty items array
  if (element.items) {
    element.items.length = 0;
  }
  // if element has children, recursively empty items array from it
  if (element.children) {
   element.children = element.children.reduce(reducer, []);
  }
  return reduced.concat(element); // or: [...reduced, element]
};

document.querySelector("pre").textContent = 
   JSON.stringify(getObj().reduce(reducer, []), null, " ");

// to keep relevant code on top of the snippet
function getObj() {
  return [
    {
      "label": "parent",
      "children": [
        {
          "label": "child1",
          "children": [
            {
              "label": "child2",
              "items": [
                "item1",
                "item2"
              ]
            },
            {
              "label": "child3",
              "items": [
                "item1",
                "item2",
                "item3"
              ]
            }
          ]
        },
        {
          "label": "child4",
          "items": []
        },
        {
          "label": "child5",
          "items": ["item1","item2"]
        }
      ]
    }
  ];
}

<pre></pre>