如何将Observable返回的数组的数组转换为单一对象数组？

要将Observable返回的二维零件数组转换为一维数组，你可以通过以下几种方式修改pipe中的map操作：

方法1：使用flatMap（推荐） #

flatMap会先映射每个job的parts数组，再自动将结果扁平化一层，代码更简洁：

this.jobsService.jobsUpdated.pipe(
  map(jobsData => jobsData.flatMap(job => job.parts))
).subscribe(partsData => {
  console.log('partsdata', partsData);
});

方法2：使用map + flat() #

先通过map提取所有parts数组得到二维数组，再用flat()扁平化：

this.jobsService.jobsUpdated.pipe(
  map(jobsData => jobsData.map(job => job.parts).flat())
).subscribe(partsData => {
  console.log('partsdata', partsData);
});

注：flat()是ES2019新增方法，若运行环境不支持，可使用下面的兼容写法。

方法3：使用reduce手动合并数组 #

通过reduce累加所有parts数组，兼容所有现代环境：

this.jobsService.jobsUpdated.pipe(
  map(jobsData => {
    return jobsData.reduce((totalParts, job) => {
      return totalParts.concat(job.parts);
    }, []);
  })
).subscribe(partsData => {
  console.log('partsdata', partsData);
});

以上三种方法都能将你当前的二维数组结构，转换为目标的单一对象数组。

内容的提问来源于stack exchange，提问作者Alex