如何创建自己的可观察的？

欢迎来到名为“从头开始创建自己的可观察对象”系列的第二部分。如果你没有’t查看上一篇关于数组的文章，然后在这里检查。在那篇文章中，我们涵盖了对Arrays理解的基础。这将很方便。

但是，在本文中，我们将看到有关Observable的一些概念以及为什么需要此概念。另外，可观察到的是它们就像异步数组。就像每次 method. It takes a callback function, 和 it executes it once 对于 each item in the rr ay. But this is done 同步地 .

同步??那么为什么我们举这个例子呢？

是的，首先我们了解每次方法。然后，我们也将跳入异步调用。

 const   rr  = [1,2,3,4,5];

arr.forEach（element =>console.log（element））;

// 1,2,3,4,5

const rr = [1,2,3,4,5];

rr . 每次 ( 元件 => 安慰 . 日志 ( 元件 ));

// 1,2,3,4,5

这里没有新内容。多次你’ll use this. Okay take a breath 和 move to asynchronous implementation.

 const   someDomElement  =  文件 .getElementById（'someDomElement'）;

const  处理  =  someDomElement .addEventListener（'click'，（event）=> {  安慰 .log('got a 点击  事件 '); });

// assuming the user 点击s on  someDomElement  5 times, you'll see
// got a 点击  事件 
// got a 点击  事件 
// got a 点击  事件 
// got a 点击  事件 
// got a 点击  事件

const someDomElement = 文件 .getElementById ('someDomElement');

const 处理 = someDomElement .addEventListener( “点击” , ( 事件 ) => { 安慰 . 日志 ('got a 点击事件 '); });

// assuming the user 点击s on someDomElement 5 times, you'll see

// got a 点击事件

上面的代码会发生什么？

让我解释一下代码。 We’ve已将回调函数传递给 addEventListener, which is called each time a 点击事件 happens on the 元件 with the id someDomElement 。它’s almost like that 处理 r is called once 对于 each time a 点击事件 happens…

addEventListener 像一个每次此DOM元素的函数，每次 click event happens. 的 only conceptual difference between this example 和 数组原型.forEach 是事件监听器发生 asynchronously.

正如我们 know that we can compose observables, 和 use functions like 地图和过滤 , similar to what we did with rr ays in part 1。现在我们准备专注于可观察的实现。但是还有更多的事情要做。我确保在下一篇文章中您’我将随时自信地实施可观察的项目。

让我们假设我们正在开发类似Netflix的应用程序。它有很多电影。这里’并不是随机选择的四部电影，因为它们可能会出现在应用程序中，而莫名其妙地只推荐1980年代的电影。由于JSON很麻烦，因此’s也代表带有彩色圆圈的电影。

正如我们在上述数据中看到的那样，它们之间没有任何关系。也没有任何上下文。但是，让我将这些数据放入容器数组。

将这些电影放到一个数组中可以使它们具有逻辑关系。例如，可能是一个用户’s favorite 电影 s.

但是为什么我们将它们放入容器中呢？

很好，如果您出现此类问题。这个数组可以代表我们最喜欢的小说用户Mary的最喜欢的电影。或者它们可以代表80年代四大最受欢迎的电影。关键是，由于我们已将它们容器化在数组中，因此我们现在具有一些考虑这些电影的逻辑上下文。它手段当我们查看该数组时，对我们有一些帮助。 嘿，那是玛丽’s favorite films!

但是还需要考虑一件事。 数组原型 提供类似的方法地图和过滤，我们现在可以通过在影片的容器中编写方法来对影片执行聚合操作。

By placing the 电影 s inside of a collection, we can now compose operations on that collection, such as 地图, 过滤 , concat, etc.

好吧，那事件呢？

是的，JavaScript没有’给我们一种容器化事件的方法！但是，如果我们需要发出xhr请求以从我们的API层获取每部电影，该怎么办？我们如何容器化随时间到达的值？

戏剧中出现了“可观察”。这是可观察对象的基本好处，它们使我们可以容器化和组成异步事件。它使我们可以将事件的异步流容器化。在这种情况下，用户’喜爱的电影列表。

可观察到的东西有很多经营者，您还必须看到这一点。

尝试避免循环，如果可能的话？

为什么？

Ok, 让 us assume that you have a task. You have to 筛选集合 of 电影 s by 导向器 , 和地图ping to only their 名称 s 和年 :

最喜欢的电影.filter（movie =>movie.director  === “约翰·休斯”）
              .map（电影=>（{名称：movie.name，年份：movie.year}））；

//我们最后得到一个带有值的容器：
// {名称：“早餐俱乐部”，年份：1986}
// {名称：“弗累斯·布勒的放假日”，年份：1987}
//

最喜欢的电影. 过滤 ( 电影 => 电影 . 导向器 === “约翰休斯” )

.地图( 电影 => ({ 名称 : 电影 . 名称 , 年 : 电影 . 年 }));

// 我们最后得到一个带有值的容器：

// {名称：“早餐俱乐部”，年份：1986}

// {名称：“弗累斯·布勒的放假日”，年份：1987}

太好了，但是等等。

您知道这种技术是同步的还是异步的？

好吧’重点。数组有地图和过滤，但我只是说可观察对象也有这些。哦？那为什么我们使用Observable？当前，您仅知道容器已被过滤，然后被映射。可能是异步的，也可能是同步的。对？

那’s为什么选择写命令式代码而不是命令式代码。

但是，现在请看下面的代码：

让收藏影片= [
  {标题：“早餐俱乐部”，年份：1986年，导演：“约翰·休斯”，
  演员：[‘Ally  希迪 ’，‘Emilio  Estevez ’，‘Judd  纳尔逊 ’]
   }， 
  {标题：“摩天轮休假”，年份：1987年，导演：“约翰·休斯”，
  演员：[‘马修·布罗德里克’，‘米娅·萨拉’，‘艾伦·拉克’]
   }， 
  {标题：“  战争游戏 ”，年份：1983年，导演：“  约翰   巴达姆 ”，
  演员：['马修·布罗德里克，'艾莉·希迪']
  } 
];

让filterAndMappedArray = [];

for (let i = 0; i <favoriteMovies.length; i  ++ ）{
  如果（favoriteMovies [i] .director  === “  约翰   休斯 ”）{
     让  地图ped = {
      名称：favouriteMovies [i] .name，
      年：最喜爱的电影[i]。年
     }; 
    
     过滤 AndMappedArray.push（mapped）;
  }
}

//我们最终得到一个（非常同步的）容器，其值如下：
// {名称：“早餐俱乐部”，年份：1986}
// {名称：“弗累斯·布勒的放假日”，年份：1987}
// ...但是我们可以做得更好:)

让最喜欢的电影 = [

{ 标题 : ‘ 的早餐俱乐部 ’, 年 : 1986, 导向器 : ‘ 约翰休斯 ’,

投 : [ ‘ 盟国希迪 ’, ‘ 埃米利奥 Estevez ’, ‘ 贾德纳尔逊 ’]

{ 标题 : “ 摩天轮 buellers 天关 ”, 年 : 1987, 导向器 : ‘ 约翰休斯 ’,

投 : [ ‘ 马修布罗德里克 ’, ‘ 米娅莎拉 ’, ‘ 艾伦拉克 ’]

{ 标题 : ‘ 战争游戏 ’, 年 : 1983, 导向器 : ‘ 约翰巴达姆 ’,

投 : [ ‘ 马修布罗德里克 ’,‘ 盟国希迪 ’]

}

];

让过滤 edAndMappedArray = [];

对于 ( 让 i = 0; i < 最喜欢的电影. 长度 ; i ++ ) {

如果 (最喜欢的电影[i]. 导向器 === “约翰休斯” ) {

让地图ped = {

名称 : 最喜欢的电影[i]. 名称 ,

年 : 最喜欢的电影[i]. 年

};

过滤 edAndMappedArray. 推 (地图ped);

}

// 我们最终得到一个（非常同步的）容器，其值如下：

// {名称：“早餐俱乐部”，年份：1986}

// {名称：“弗累斯·布勒的放假日”，年份：1987}

// ...但是我们可以做得更好:)

那里真是个大惊喜！循环几乎是当务之急，实际上已被蚀刻到同步世界中。您不能希望在更高层次上推理循环，因为您’总是会被实施细节所困扰。

正如我们’ll see, observables free us from this burden when we are dealing with async data. Now 让 s wrap things up 和 move to conclusion of this part.

概要

Collections like rr ays 和 observables make it easier 对于 us to compose operations, like 地图和过滤
我们可以使用更具声明性，更可组合的方法（例如， map and 过滤器，与编写命令式循环相反

在下一部分中，我们将研究观察者模式，该模式由 #RxJS , 和 then we’将开始为我们的可观察类编写一些创建方法。

概要

文章名

如何从头开始创建自己的可观察– Looping

描述

欢迎来到名为“从头开始创建自己的可观察对象”系列的第二部分。如果您尚未查看有关Arrays的上一篇文章，请在此处进行检查。

作者

达斯

发布者名称

达斯

出版商徽标