6. Observable 和 数组的区别

简介: Observable 和 数组都有filter, map 等运算操作operators,具体的区别是什么?主要是两点:延迟运算渐进式取值延迟运算延迟运算很好理解,所有 Observable 一定会等到订阅后才开始对元素做运算,如果没有订阅就不会有运算的行为var source = Rx.

Observable 和 数组都有filter, map 等运算操作operators,具体的区别是什么?
主要是两点:

  1. 延迟运算
  2. 渐进式取值

延迟运算

延迟运算很好理解,所有 Observable 一定会等到订阅后才开始对元素做运算,如果没有订阅就不会有运算的行为

var source = Rx.Observable.from([1,2,3,4,5]);
var example = source.map(x => x + 1);

上面这段代码因为 Observable 还没有被订阅,所以不会真的对元素做运算,这跟数组的操作不一样,如下

var source = [1,2,3,4,5];
var example = source.map(x => x + 1); 

上面这段代码执行完,example 就已经取得所有元素的返回值了。

数组的运算都必须完整的运算出每个元素的返回值并组成一个新数组,再做下一个运算。

渐进式取值

数组的 operators 都必须完整的运算出每个元素的返回值并组成一个数组,再做下一个 operator 的运算,我们看下面这段程式码

var source = [1,2,3];
var example = source
              .filter(x => x % 2 === 0) // 这裡会运算并返回一个完整的数组
              .map(x => x + 1) // 这裡也会运算并返回一个完整的数组

上面这段代码,相信读者们都很熟悉了,大家应该都有注意到 source.filter(...)就会返回一整个新数组,再接下一个 operator 又会再返回一个新的数组,这一点其实在我们实作 map 跟 filter 时就能观察到

Array.prototype.map = function(callback) {
    var result = []; // 建立新数组
    this.forEach(function(item, index, array) {
        result.push(callback(item, index, array))
    });
    return result; // 返回新数组
}

每一次的 operator 的运算都会建立一个新的数组,并在每个元素都运算完后返回这个新数组,我们可以用下面这张动态图表示运算过程

img_ecb133dfa9aa83c9549655aeab0d7af6.gif
image.png

Observable operator 的运算方式跟数组的是完全的不同,虽然 Observable 的 operator 也都会回传一个新的 observable,但因为元素是渐进式取得的关系,所以每次的运算是一个元素运算到底,而不是运算完全部的元素再返回。

var source = Rx.Observable.from([1,2,3]);
var example = source
              .filter(x => x % 2 === 0)
              .map(x => x + 1)

example.subscribe(console.log);

上面这段程式码运行的方式是这样的

  1. 送出 1 到 filter 被过滤掉
  2. 送出 2 到 filter 在被送到 map 转成 3,送到 observer console.log 印出
  3. 送出 3 到 filter 被过滤掉

每个元素送出后就是运算到底,在这个过程中不会等待其他的元素运算。这就是渐进式取值的特性,不知道读者们还记不记得我们在讲 Iterator 跟 Observer 时,就特别强调这两个 Pattern 的共同特性是渐进式取值,而我们在实作 Iterator 的过程中其实就能看出这个特性的运作方式

class IteratorFromArray {
    constructor(arr) {
        this._array = arr;
        this._cursor = 0;
    }

    next() {
        return this._cursor < this._array.length ?
        { value: this._array[this._cursor++], done: false } :
        { done: true };
    }

    map(callback) {
        const iterator = new IteratorFromArray(this._array);
        return {
            next: () => {
                const { done, value } = iterator.next();
                return {
                    done: done,
                    value: done ? undefined : callback(value)
                }
            }
        }
    }
}

var myIterator = new IteratorFromArray([1,2,3]);
var newIterator = myIterator.map(x => x + 1);
newIterator.next(); // { done: false, value: 2 }

虽然上面这段代码是一个非常简单的示范,但可以看得出来每一次 map 虽然都会返回一个新的 Iterator,但实际上在做元素运算时,因为渐进式的特性会使一个元素运算到底,Observable 也是相同的概念,我们可以用下面这张动态图表示运算过程

img_bccf6bf56d39e612d06513b798bee687.gif
image.png

渐进式取值的观念在 Observable 中其实非常的重要,这个特性也使得 Observable 相较于 Array 的 operator 在做运算时来的高效很多,尤其是在处理大量资料的时候会非常明显!
(想像一下我们今天要切五万个大蛋糕,你会选择切完一个请一个人拿走,还是全部切完再拿给所有人呢?哪个会比较有效率呢?)

相关文章
|
2月前
|
前端开发 算法 JavaScript
2695. 包装数组
2695. 包装数组
16 0
|
5月前
|
存储 索引
数组和对象有什么区别?
数组和对象有什么区别?
41 0
|
5月前
|
存储 JavaScript 前端开发
什么是数组,什么是对象,他们的区别是什么
什么是数组,什么是对象,他们的区别是什么
29 0
|
6月前
|
数据处理 对象存储
关于 Observable 对象调用 subscribe 方法时不传递任何参数值的用法讨论
关于 Observable 对象调用 subscribe 方法时不传递任何参数值的用法讨论
48 0
|
7月前
|
API
Rxjs map, mergeMap 和 switchMap 的区别和联系
Rxjs map, mergeMap 和 switchMap 的区别和联系
50 1
|
7月前
rxjs Observable 两大类操作符简介
rxjs Observable 两大类操作符简介
41 1
|
7月前
|
JavaScript
rxjs Observable filter Operator 的实现原理介绍
rxjs Observable filter Operator 的实现原理介绍
41 0
|
JavaScript 前端开发 索引
ES6——类数组转换为数组的几种方法以及for of、forin、for Each的区别
类数组转换为数组的几种方法以及for of、forin、for Each的区别
102 0
|
Dart 索引
【Flutter】Dart 数据类型 List 集合类型 ( 定义集合 | 初始化 | 泛型用法 | 初始化后添加元素 | 集合生成函数 | 集合遍历 )
【Flutter】Dart 数据类型 List 集合类型 ( 定义集合 | 初始化 | 泛型用法 | 初始化后添加元素 | 集合生成函数 | 集合遍历 )
565 0
|
前端开发
React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)
React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)
149 0
React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)