我们可以使用reducer而不是循环两次吗？

Question

我从对象数组和对象数组中两次更改了一个对象，因此在第一次迭代中，我滤除了一些对象，而在第二次迭代中，我使用map更改了每个滤过的对象。我可以使用减速器或更好的东西吗？

  const originalTree = html.parse(text);

  if (originalTree[0].type === 'text') {
    return text;
  }
  const result = originalTree
    .map((obj) => ({
      ...obj,
      children: obj.children.filter((el) => el.name !== 'style'),
    }))
    .map((obj) => ({
      ...obj,
      children: obj.children.map(function(child) {
        child.attrs = {};
        return child;
      }),
    }));

  return html.stringify(result);
}

Answer 1

这是一种与一个originalTree.map()循环的方法，还将您的children.filter().map()链简化为children.flatMap()调用：

children.flatMap()

Answer 2

由于您仍然要使用

const result = originalTree.map(
  obj => ({
    ...obj,
    children: obj.children.flatMap(
      el => el.name !== 'style'
        ? [{ ...el, attrs: {} }]
        : []
    )
  })
);

遍历整个数组，因此您可以在此过程中修改必要的项目：

.filter()

您可以在下面找到快速演示：

const result = originalTree
    .map((obj) => ({
      ...obj,
      children: obj.children.filter((el) => el.name !== 'style' ? (el.attrs = {}, true) : false),
    }))

const originalTree = [
        {
          type: 'tag',
          name: 'p',
          children: [
            {type: 'tag', name: 'style'},
            {type: 'tag', name: 'text'},
          ]
        },
        {
          type: 'tag',
          name: 'div',
          children: [
            {type: 'tag', name: 'text'},
            {type: 'tag', name: 'span'},
            {type: 'tag', name: 'style'}
          ]
        }
      ],
     result = originalTree
      .map((obj) => ({
        ...obj,
        children: obj.children.filter((el) => el.name !== 'style' ? (el.attrs = {}, true) : false),
      }))
      
console.log(result)