• 先前介紹的first(條件式)可以定義條件式，來決定拿取資料的條件，但只能拿一個；如果我希望能持續取得資料，當條件不符時才中斷呢?takeWhile就是你的最佳幫手。

takeWhile

圖片來源-RxJS官網: takeWhile

• 從彈珠圖來看，符合條件時，takeWhile會持續地抓取資料，當條件不成立時，會在下一次時才結束。☕

用法

圖片來源-RxJS官網: takeWhile

• 從官網的說明來看，take(predict, inclusive):

1. predict:一個函示，提供我們建立條件預測的函示，符合條件回傳true，條件不成立回傳false。
2. inclusive:預設值是false，字面上來說是包含的意思，也就是當條件不符時回傳false還是回給我資料吧!

case1: takeWhile(predict)

stackblitz

import { from, takeWhile } from 'rxjs';

const predict = (val) => val < 3; //<-- 小於3才取值

// case1: takeWhile(predict)
console.log("=== case1: takeWhile(predict) ===")
from([1, 2, 3, 4, 5])
  .pipe(takeWhile(predict))
  .subscribe({
    next: console.log,
    complete: () => console.log('completed!'),
  });
  
// 印出結果
// 1
// 2
// completed (當predict回覆為false時結束)

• 我們設定條件式為值小於3才取值，因此:

1. 當predict接收到值1,2時，回覆true，進行取值。
2. 當predict接收到值3時，回覆false，呼叫complete結束。
   ，

case2: 最後一個值也來一下 - inclusive

• 稍早介紹的第二個參數inclusive設定為true時，就會回傳最後一個值，趕緊來看一下範例。
  stackblitz

...
const isInclusive = true;
// case2: set inclusive as true
console.log('=== case2: set inclusive as true ===');
from([1, 2, 3, 4, 5])
  .pipe(takeWhile(predict, isInclusive))
  .subscribe({
    next: console.log,
    complete: () => console.log('completed!'),
  });

// 印出結果
// 1
// 2
// 3 <--最後一筆資料有印出
// completed (當predict回覆為false時結束)

• 這有點像我們寫迴圈，在設定條件式時:

1. <3:不包含3
2. <=3: 包含3

case3: 比較一下takeWhile及filter

• 我們在day16:安插個觀察點 - tap (下集)有提到一個有趣的地方，就是使用filter時，不會終止內部的資料傳遞；今個兒，咱們來看看takeWhile是不是也有一樣的情形。

• 我們分別用takeWhile及filter，並在放置tap於pipe中，觀察看看內部資料傳遞的情形。
  stackblitz

import { from, takeWhile, filter, tap } from 'rxjs';

const predict = (val) => val < 3; //<-- 小於3才取值

// case3: compare takeWhile + filter
console.log('=== takeWhile case ===');
from([1, 2, 3, 4, 5])
  .pipe(
    tap((v) => console.log('checked:', v)),
    takeWhile(predict)
  )
  .subscribe({
    next: console.log,
    complete: () => console.log('completed!'),
  });

console.log('=== filter case ===');
from([1, 2, 3, 4, 5])
  .pipe(
    tap((v) => console.log('checked:', v)),
    filter(predict)
  )
  .subscribe({
    next: console.log,
    complete: () => console.log('completed!'),
  });

解析☕

✍Recap

1. takeWhile(predict, inclusive):

predict:一個函示，提供我們建立條件預測的函示，符合條件回傳true，條件不成立回傳false。
inclusive:預設值是false，字面上來說是包含的意思，也就是當條件不符時回傳false，還是回傳資料。

2. 與filter相比，當不符合條件時:

takeWhile: 直接中斷內部資料傳遞。
filter: 不會中斷內部資料傳遞，若使用interval當作observable，會發生無窮迴圈的現象，這點請特別留意。

• 喔耶~完成第18天，最近很喜歡看大腦喜歡這樣學這本書，讓我真正了解到好好學習的真諦，分享給大家。