Question

我需要遍历多个数组。

下面是我编写的代码，如何避免多次forEach。

  @Input() content: any;
  public sections:any;
      ngOnInit() {
        this.content.map(data => this.sections = data.sections);

        this.sections.forEach(rjfBlock => {
          rjfBlock.rjf.forEach(response => {
            const type = this.contentMappings[response.type];
            this.service.createComponent(response, type);
          });
        });
      }

如何减少上述几行代码并提高代码质量？

Answer 1

首先，array.map不用于循环。这就是array.forEach的工作。 array.map用于从另一个数组创建一个数组，可以选择转换每个值。

this.content.map(data => this.sections = data.sections);

这是将this.content中的最后一项分配给this.sections。您不需要array.map来执行此操作。您只需通过其索引即可获取最后一个项目。

this.sections = this.content[this.content.length - 1]

如果您的数据是嵌套的，则无法避免多个循环。但是，提高可读性的方法是将嵌套循环变成一系列平面循环。在您的代码中，您所追求的是response。因此，让我们先展平this.sections，然后然后遍历它。

this.sections
  .map(rjfBlock => rjfBlock.rjf)
  .reduce((c, rjf) => [...c, ...rjf], [])
  .forEach(response => {
    const type = this.contentMappings[response.type]
    this.service.createComponent(response, type)
  })

让我们分解一下：

.map将所有rjf数组收集到一个数组中。至此，我们有了一个数组数组。
.reduce通过将每个数组合并为一个数组来展平该数组。至此，我们有了一个单层的响应数组。
.forEach-遍历每个响应。

使用.map的最佳方法

1 个答案: