Angular 地图。它是什么？

Question

我正在学习Angular 6，我对像a这样的结构感到困惑：

this.contentArray.map((v: string, i: number) => `Content line ${i + 1}`)

或者像一个：

return this.aService.getItems()
    .pipe(map(response => response.data));

我已经阅读了一些关于 Angular 6 的书籍，如《The_Complete_Book_on_Angular_6》或《Pro Angular 6》（Adam Freeman），但是它们并没有提供简单的解释。即使在谷歌上也找不到相关信息。请问是否有人能够提供适合初学者的关于 array.map，array.filter 以及 .pipe(map(...)) 的正确而好的教程或书籍？

- Anton Romanov

---

这与Angular无关。数组map是JavaScript方法，您可以在MDN网站上找到更多文档。可管道化的map来自RxJS，您可以在https://learnrxjs.io上了解更多关于RxJS的信息。 - ibenjelloun

Answer 1

第一种方法是使用 Array.prototype.map，而第二种方法是使用 rxjs 的 map 操作符。

在第一种情况下，您需要取一个现有的数组并对其每个元素应用一个函数。

map() 方法会创建一个新数组，其结果是将调用原始数组中的每个元素所执行的函数。

[1, 2, 3, 4].map(x => x + 2) // [3, 4, 5, 6]

而在Observable的世界里，第二种情况本质上与第一种情况相同。

将给定的项目函数应用于源Observable发出的每个值，并将结果值作为Observable发出。

- bugs

---

Rxjs的map操作符可以应用于单个值，不需要是对象数组。 - Derviş Kayımbaşıoğlu

Answer 2

在你的第一条语句中，Map是JavaScript数组函数，它按顺序遍历数组中的每个项，以将对象数组映射到另一个对象数组。

let array = [1,2,3,4,5] ;
let result = array.map(val => val +10); //11,12,13,14,15

在你的第二个语句中，map 来自于 rxjs 库。它将对象映射到另一个对象，但结果对象将是可观察的。

const source = from([1, 2, 3, 4, 5]); //add 10 to each value const example = source.pipe(map(val => val + 10)); //output: 11,12,13,14,15

- Derviş Kayımbaşıoğlu

---

谢谢，那么在我的例子中，如果“v”不再在表达式的右侧使用，我们使用“v”的目标是什么？this.contentArray.map((v: string, i: number) => Content line ${i + 1}) - Anton Romanov

v是项，i是数组的索引 - Derviş Kayımbaşıoğlu