Observable — это новый тип, который был представлен 5 лет назад библиотекой Microsoft Reactive Extensions. Это моя попытка представить их простыми словами.

В статье Асинхронный JavaScript с реактивными расширениями Джафар Хусейн говорит:

Observable — это просто набор элементов во времени.

Это действительно отличное краткое описание Observables, и оно исходит из
прозрения Джафара, когда он работал в Microsoft, и Эрик Мейер спросил его об этом (я перефразирую):

В чем разница между коллекцией и мероприятием?

Когда вы смотрите на эти два бок о бок на более высоком уровне, их действительно не так уж много разделяет:

Действительно они такие же. Они оба коллекции. Один представляет собой коллекцию в пространстве, а другой — коллекцию на временной шкале.

Рассмотрение событий таким образом привело к выводу, что вы должны иметь возможность преобразовывать передаваемые вам данные о событиях так же, как вы можете это делать с коллекциями.

Что это обозначает?

В JavaScript у нас есть индексированные коллекции, и мы называем их массивами. У этих массивов есть куча аккуратных методов итерации, которые позволяют вам перебирать все элементы массива разными способами и возвращать новый массив по завершении. Они не мутируют данные в исходном массиве. Вы также можете связать эти функции, что делает довольно сложные преобразования данных довольно простыми.

Одной из таких функций массива является «карта». Map перебирает исходный массив
и передает каждый элемент исходного массива в функцию обратного вызова. Обратный вызов
затем может что-то сделать с этим элементом, и все, что возвращает эта функция,
становится элементом результирующего нового массива, который имеет ту же длину, что и исходный массив.

Вот простой пример с нашим массивом координат, в котором мы преобразуем
массив координат в массив, содержащий только координаты x:

Теперь у нас есть массив, содержащий значения координат x, но нас
интересуют только координаты x больше 2.

К счастью, мы можем просто связать функцию «фильтр» с функцией карты.
Функции фильтра выполняют итерацию по массиву и возвращают новый массив, содержащий все элементы, для которых функция обратного вызова, переданная фильтру, возвращает «истину».

И вот как мы это делаем:

Итак, теперь у нас есть массив только с двумя значениями x, которые больше 2
, и мы можем что-то делать с ним в пользовательском интерфейсе.

Хорошо, помните, как я сказал, что с Observable мы можем делать то же самое с данными, которые нам передаются?

Возьмем, к примеру, поток событий щелчка мыши. Представьте, что по какой-то причине мы хотим немедленно реагировать на каждый клик мыши по документу, но только на те, координата x которых больше 100.

С Observables мы можем сделать это, просто используя функции массива.

Конечно, этот пример очень упрощен, но, тем не менее, он демонстрирует мощь
исходной идеи о том, что события — это просто коллекции на временной шкале. Вместо
результата в виде массива (коллекции в пространстве) данные проходят через функции массива
одна за другой (коллекция во времени) и могут быть обработаны в
функции подписки one одним.

Вот рабочий пример в JSBin.