[skip](https://medium.com/angularwave/rxjs-challenge-17-non-flicker-loader-15545d3be525) 操作符允許我們忽略源的前 x 個排放。 當我們有一個始終在 subscription 上發出希望忽略的某些值的可觀察物件時，就可以使用這個操作符。比如 Observable emit 的前幾個值並不是我們感興趣的值，另一種情況是我們訂閱了 Replay 或 BehaviorSubject，並且不需要對初始值進行操作，而只關心初始值之後的資料 emit. 這種情況下，skip 操作符非常有用。

有時候我們可以通過使用帶有索引的 filter 操作符來達到和使用 skip 同樣的效果：

> filter((val, index) => index > 1)

來看看一個現實專案中的例子。

使用 skip 組合出的 Observable 程式碼如下：

```typescript
combineLatest([
  data$.pipe(startWith(null)),
  loading$,
]).pipe(
  takeWhile(([data, loading]) => !data || loading, true),
  map(([data, loading]) => loading ? null : data),
  skip(1),
  distinctUntilChanged(),
);
```

![](https://img-blog.csdnimg.cn/img_convert/152dd00e1dc06b513e6fd089ae693ed8.png)

上面的程式碼執行時分三種不同的情況。

1. 載入時間不到 1 秒。我們的初始 null 被 skip(1) 跳過，並且 data$ 在 loader 發出 true 之前發出了 true. 這意味著 takeWhile 條件失敗，我們終止讓資料通過的流（資料是 not falsy，loading 是 false）.

2. 載入耗時 1.5 秒。現在我們有 data$ 發出 null 並且 loading 是 true. 這符合 takeWhile 條件並被對映為 null。我們使用這個 null 來顯示巨集流中的 loading. 下一個 data$ 發出該值，但載入仍然為真。所以 takeWhile 允許它，並且該值再次對映到 null ，該 null 由 distinctUntilChanged 過濾。整秒過後，載入會發出 false 並 takeWhile 終止流。最後一次發射被對映到 data$ 上次發射的值，我們隱藏載入指示器並顯示資料。

3. 載入時間超過 2 秒。開頭是一樣的，但是我們現在載入的不是 data$ 發出的值，而是發出 false ，因為不再需要顯示載入指示符。但是資料仍然為空，因此 takeWhile 保持流處於活動狀態並將其對映為空。但是一旦我們從 data$ 中獲得值——流就完成了，map 返回我們想要顯示的實際資料。

rxjs 裡 Skip 操作符的一個使用場景

相關文章