如何创建自己的可观察的？
RxJS是Angular的月光。可观察是现代技术使用的核心。在上一篇文章中，我们介绍了 RxJS速成课程 通过使用CDN。它可以为您提供RxJS所有功能的深入介绍。我们已经介绍了 开发人员在RxJS中的常见错误 现在一天。如果您已经阅读了这些文章。然后这新的一天，我们将从头开始创建自己的Observable。
开始时，我很困惑RxJS的使用方式和时间。但是慢慢地，我了解了Observable的概念，并且可以放心地阅读源代码。如果您正面临同样的挑战，那就和我们呆在一起以消除恐惧。
您准备好从头开始构建自己的Observable吗？
如果您的答案是肯定的。然后继续前进，否则返回速成课程进行练习。首先，你’ve了解数组，了解Observable。
数组运算符
啊啊 ？数组？
如果你’re familiar with 地图，过滤器， 降低，并展平嵌套数组。您可以跳过本文并转到 本系列的第二部分.
这是您的一项小任务。取一个数字数组，如：
|
1 |
const rr = [1,2,3]; |
处理数组并使用数组的所有元素+1 到达 退后一步，打开您喜欢的IDE，然后 ＃自己做
解:
如果您的步骤与上面“解决方案”中给出的步骤相同。然后你’在正确的道路上。让’s看到了地图运算符背后的魔力。
|
1 2 3 4 5 6 7 8 9 |
数组.原型.地图 = 功能(投影) { 让 retVal = []; 对于 (让 i = 0; i < 这个.长度; i++ ) { retVal.推(投影(这个[i])); } 返回 retVal; } |
在这里，您可以看到代码中没有任何幻想。 数组.prototype.map 需要一个 投影 函数，用于循环数组中的元素。为此 将projectionFn应用于每个元素，并将其结果推入新数组。
您可以优化地图运算符吗？
如果您在上述任务？中优化了地图运算符，请评论您的分叉提琴。
过滤运算符
处理完数组后，现在您要过滤数组。所以让’在本文中也涵盖了过滤器。另一个婴儿任务适合您。过滤上面的数组，结果应该是偶数。
解：
这对您来说很容易吗？让’移至过滤器运算符的代码。
|
1 2 3 4 5 6 7 8 9 10 |
数组.原型.过滤 = 功能(谓词Fn) { 让 retVal = []; 对于 (让 i = 0; i < 这个.长度; i++ ) { 如果 (谓词Fn(这个[i]) { retVal.推(这个[i]); } } 返回 retVal; } |
同样，它是一个简单的实现。它使用谓词函数并检查适用于数组中每个元素的偶数。
敢于优化过滤器运算符？
您是否观察到没有什么花哨的代码在map和filter运算符后面起作用？现在，我们可以将两个运算符组合在一起，并具有一些不错的组合。
|
1 2 |
const rr = [1,2,3,4,5,6]; const compositionArr = rr.地图(x => x + 1).过滤(y => y % 2 === 0); // [2,4,6]; |
作文是一个有趣的话题。 MPJ在Youtube上有一个不错的系列，您可以找到 这里.
累了吗？关于数组？
那里’我们还需要从数组中进行观察。一旦有了这些，可观察性将变得微不足道。
FlatMap运算符
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const 游戏Data = [ { 标题: 《超级英雄2》, 老板: [ { 名称: 泡泡人, 武器: 泡泡龙 }, { 名称: '金属人', 武器: “金属刀片” }] }, { 标题: 《超级英雄3》, 老板: [ { 名称: 双子座的人, 武器: 双子座激光 }, { 名称: '头号人物', 武器: '上旋' }] } ]; //返回所有老板的数组 const 老板Array = 游戏Data.地图(游戏 => { 返回 游戏.老板; }); //哦，那是嵌套数组！ // [[[{}，{}]，[{}，{}]] |
你输出什么’会得到吗？在您的项目中很难阅读。那你呢’会处理您的代码。同样，这里也不需要花哨的代码。
在30-32行中，我们使用 地图 运算符 游戏Data 数组。并且它返回数组，但是由于嵌套数组，不容易读取该数组进行编码。
这可能不是我们想要的。理想情况下，我们’d希望将所有内容拼合为一个阵列。我们只需要一个将采用数组并将其深度减小一个因子的方法。由于我们在此数组中只有一层嵌套，因此我们希望一次应用这种深度减小方法。
|
1 2 3 |
const 老板Array = 游戏Data.flatMap(游戏 => { 返回 游戏.老板; }); |
flatMap背后的逻辑是：
|
1 2 3 4 5 6 7 8 |
数组.原型.flatMap = 功能() { 让 retVal = []; 这个.每次(a => { retVal = retVal.康卡特(a); }); 返回 retVal; } |
你有能量吗？优化它？
在处理高阶可观察物（可观察物的可观察物）时，也会定期出现这种情况。如果你’我曾经发现自己正在处理嵌套的可观测对象，并努力达到 flatMap 运算符，那么你’ll know what I mean.
那’s it 对于 now. 如果你’重新适应数组。然后，即将上路对您来说很容易。
如果您到达本文末尾。就是说，这对您来说是一篇好文章。 Isn’是吗？如果是，则点击心脏图标？在文章底部的右侧。请分享和评论。
