Rxjs

Question

比较这个

return this.httpClient.get('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest', {params: data}).pipe(
            map((x: any) => x.suggestions.map((y) => {
                return {
                    ...y,
                    title: y.text
                };
            })),
        );

有了这个

return this.httpClient.get('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest', {params: data}).pipe(
            map((x: any) => x.suggestions),
            map((y: any) => y.title = y.text)
        );

为什么这些情况不相等？

第一个工作符合预期，"remove" 建议属性并复制属性文本到标题

第二个returns我一个值...不是数组

我可以只使用 map() 函数而不是 .map() 吗？

Answer 1

在您使用的第一个 .map()

return this.httpClient.get('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest', {params: data}).pipe(
                map((x: any) => x.suggestions.map((y) => {
                    return {
                        ...y,
                        title: y.text
                    };
                })),
            );

您正在使用 suggestions.map()

.map()函数returns和数组。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

看看 rxjs 的 map() 做了什么 https://www.learnrxjs.io/operators/transformation/map.html

Answer 2

第一个是RxJS的pipeable operator map，第二个是Array的map函数。

让我们看看您示例中的类型：

在第一个例子中，你得到了对象的Observable。在这种情况下，地图运算符允许您使用其中的建议数组来转换对象。然后通过 Array 的映射函数将每个项目从 x.suggestions 数组映射到新项目。

const obs$: Observable<{ suggestions: any[] }> = this.httpClient.get('url', { params: data });
obs$.pipe(
  map((x: { suggestions: any[] }) => x.suggestions.map((y) => {
    return {
      ...y,
      title: y.text
    };
  })),
);

在第一个 map 运算符之后的第二个示例中，您可以观察到数组。因此第二个地图运算符有错误。

const obs$: Observable<{ suggestions: any[] }> = this.httpClient.get('url', { params: data });
const tmp$: Observable<any[]> = obs$.pipe(
  map((x: { suggestions: any[] }) => x.suggestions),
);
tmp$.pipe(
  map((x: any[]) => x.title = x.text) // this line has error: Property 'title' does not exist on type 'any[]'.
)

Since you have Observable of array, you are mapping each item, which is array emitted from the Observable, to the new item.

In case of Array, you are mapping each item, which is object from array, to the new item.

您的想法是，在 Array 的 Observable 中，它允许您将数组中的项目映射到新项目，但事实并非如此。它允许您将整个数组映射到您想要的任何位置。

作为你想做的事情的解决方案，看看这个：

this.httpClient.get('url', { params: data })
  .pipe(
    switchMap(x => x.suggestions),
    map(x => (...x, title: x.text)),
    toArray(),
  )

现在，通过 switchMap，您可以得到项目的 Observable（而不是数组的 Observable），您可以根据需要映射每个项目，然后通过 toArray 运算符将其转换回数组的 Observable。

Rxjs - 比较 .map() 和 map()

Rxjs - Comparing .map() with map()

angular

rxjs6