我们今天要接着讲 take， first， takeUntil， concatAll 这四个 operators，并且实作一个简易的拖拉功能。

Operators

take

take 是一个很简单的 operator，顾名思义就是取前几个元素后就结束，范例如下

var source = Rx.Observable.interval(1000)
var example = source.take(3)
example.subscribe({
	next: (value) => {
		console.log(value)
	},
	error: (err) => {
		console.log('Error: ' + err)
	},
	complete: () => {
		console.log('complete')
	},
})
// 0
// 1
// 2
// complete

这里可以看到我们的source原本是会发出无限个元素的，但这里我们用take(3)就会只取前 3 个元素，取完后就直接结束（complete）。

用 Marble diagram 表示如下

source : -----0-----1-----2-----3--..
        take(3)
example: -----0-----1-----2|

first

first 会取 observable 送出的第 1 个元素之后就直接结束，行为跟 take（1） 一致。

var source = Rx.Observable.interval(1000)
var example = source.first()
example.subscribe({
	next: (value) => {
		console.log(value)
	},
	error: (err) => {
		console.log('Error: ' + err)
	},
	complete: () => {
		console.log('complete')
	},
})
// 0
// complete

用 Marble diagram 表示如下

source : -----0-----1-----2-----3--..
        first()
example: -----0|

takeUntil

在实务上 takeUntil 很常使用到，他可以在某件事情发生时，让一个 observable 直送出 完成（complete）讯息，范例如下

var source = Rx.Observable.interval(1000)
var click = Rx.Observable.fromEvent(document.body, 'click')
var example = source.takeUntil(click)

example.subscribe({
	next: (value) => {
		console.log(value)
	},
	error: (err) => {
		console.log('Error: ' + err)
	},
	complete: () => {
		console.log('complete')
	},
})
// 0
// 1
// 2
// 3
// complete （点击body了）

这里我们一开始先用interval建立一个 observable，这个 observable 每隔 1 秒会送出一个从 0 开始递增的数值，接着我们用takeUntil，传入另一个 observable。

当传入takeUntil的 observable 发送值时，原本的 observable 就会直接进入完成（complete）的状态，并且发送完成讯息。 也就是说上面这段代码的行为，会先每 1 秒印出一个数字（从 0 递增）直到我们点击 body 为止，他才会送出 complete 讯息。

如果画成 Marble Diagram 则会像下面这样

source : -----0-----1-----2------3--
click  : ----------------------c----
        takeUntil(click)
example: -----0-----1-----2----|

当 click 一发送元素的时候，observable 就会直接完成（complete）。

concatAll

有时我们的 Observable 送出的元素又是一个 observable，就像是二维阵列，阵列里面的元素是阵列，这时我们就可以用concatAll把它摊平成一维阵列，大家也可以直接把 concatAll 想成把所有元素 concat 起来。

var click = Rx.Observable.fromEvent(document.body, 'click')
var source = click.map((e) => Rx.Observable.of(1, 2, 3))
var example = source.concatAll()
example.subscribe({
	next: (value) => {
		console.log(value)
	},
	error: (err) => {
		console.log('Error: ' + err)
	},
	complete: () => {
		console.log('complete')
	},
})

这个范例我们每点击一次 body 就会立刻送出 1,2,3，如果用 Marble diagram 表示则如下

click  : ------c------------c--------
        map(e => Rx.Observable.of(1,2,3))
source : ------o------------o--------
                \            \
                 (123)|       (123)|
                   concatAll()
example: ------(123)--------(123)------------