如何创建自己的可观察的?
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’是吗?如果是,则点击心脏图标?在文章底部的右侧。请分享和评论。

