是否可以减少而不是过滤和映射？ [复制]答案

【问题标题】：Is it possible to do reduce instead of filter and map? [duplicate]是否可以减少而不是过滤和映射？ [复制]
【发布时间】：2020-05-07 17:21:58
【问题描述】：

我从对象数组中更改一个对象两次，以便在第一次迭代中过滤掉一些对象，在第二次迭代中我使用 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);
}

【问题讨论】：

你可以随时use transducers
我认为 reducer 在这里没有意义，因为 reducer 会将所有内容累积到一个最终值。看起来你想保持你的数组完好无损。
@CalIrvine 您可以简化为单个...数组。映射操作可以定义为arr.reduce((result, item, index, array) => [...result, mappingFn(item, index, array)], [])
链接obj.children 是否比在originalTree 上映射两次更有意义？
@CalIrvine 这是一个例子。您可以做更多事情 - 例如，您可以同时映射和过滤器的逻辑。或者进行其他类型的操作 - 填写特定的数组索引并生成稀疏数组，而不是像 map 这样的密集数组。 reduce 只是给你更多的控制权，你如何使用这取决于你。事实上，transducers 将数组迭代器的概念提升到了另一个层次——你得到了一个 chainable 和 lazy 迭代，它在遍历整个数组一次时是高效的，即使你这样做了7 个映射和 5 个过滤器。传感器基于reduce。

标签： javascript reactjs ecmascript-6 reducers

【解决方案1】：

这是一种循环使用 originalTree.map() 的方法，也可以将您的 children.filter().map() 链简化为 children.flatMap() 调用：

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

如果您希望继续在obj.children 上分别使用filter() 和map()，我建议至少不可变地添加attrs，而不是修改现有引用：

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

【讨论】：

它肯定更清晰
现在这是一个相当完整的答案！ :)