doc: update xjs.md #674
This commit is contained in:
jaywcjlove
parent
1013713630
commit
99c34277e1
@ -78,7 +78,7 @@ Quick Reference
|
||||
[Scala](./docs/scala.md)<!--rehype:style=background: rgb(34 82 94);-->
|
||||
[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57);-->
|
||||
[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247);&class=tag&data-lang=swift-->
|
||||
[Spring Boot](./docs/springboot.md)<!--rehype:style=background: rgb(0 255 0);&class=tag&data-lang=Java-->
|
||||
[Spring Boot](./docs/springboot.md)<!--rehype:style=background: rgb(0 149 0);&class=tag&data-lang=Java-->
|
||||
[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
|
||||
[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
|
||||
<!--rehype:class=home-card-->
|
||||
@ -101,6 +101,7 @@ Quick Reference
|
||||
[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31);-->
|
||||
[jQuery](./docs/jquery.md)<!--rehype:style=background: rgb(203 183 31);-->
|
||||
[Next.js](./docs/nextjs.md)<!--rehype:style=background: rgb(0 0 0);&class=tag&data-lang=React-->
|
||||
[RxJS](./docs/rxjs.md)<!--rehype:style=background: rgb(151 0 81);-->
|
||||
[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173);-->
|
||||
[React Router](./docs/reactrouter.md)<!--rehype:style=background: rgb(244 66 79);&class=tag&data-lang=React-->
|
||||
[React Native](./docs/react-native.md)<!--rehype:style=background: rgb(34 143 173);&class=tag&data-lang=React-->
|
||||
|
||||
27
assets/rxjs.svg
Normal file
27
assets/rxjs.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 255 255">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="11.935%" x2="62.881%" y1="90.18%" y2="37.177%">
|
||||
<stop offset="0%" stop-color="#E01D84"/>
|
||||
<stop offset="40.1%" stop-color="#DF1D85"/>
|
||||
<stop offset="77%" stop-color="#932C87"/>
|
||||
<stop offset="100%" stop-color="#5D2F88"/></linearGradient>
|
||||
<linearGradient id="c" x1="-.146%" x2="99.946%" y1="49.99%" y2="49.99%">
|
||||
<stop offset="0%" stop-color="#E01D84"/>
|
||||
<stop offset="23.8%" stop-color="#DA1E85"/>
|
||||
<stop offset="65.8%" stop-color="#C72085"/>
|
||||
<stop offset="99.9%" stop-color="#B52284"/></linearGradient>
|
||||
<radialGradient id="b" cx="77.558%" cy="33.251%" r="77.293%" fx="77.558%" fy="33.251%" gradientTransform="matrix(.7343 .0024 -.00176 1 .207 -.002)">
|
||||
<stop offset="0%" stop-color="#E01D84"/>
|
||||
<stop offset="13.9%" stop-color="#DE1E85"/>
|
||||
<stop offset="28.5%" stop-color="#D62085"/>
|
||||
<stop offset="43.4%" stop-color="#C92386"/>
|
||||
<stop offset="58.6%" stop-color="#B72786"/>
|
||||
<stop offset="73.9%" stop-color="#9D2B87"/>
|
||||
<stop offset="89.1%" stop-color="#7C2E88"/>
|
||||
<stop offset="100%" stop-color="#5D2F88"/></radialGradient></defs>
|
||||
<g fill="none" transform="translate(1 2)">
|
||||
<path fill="#E32286" d="M14.6140689,158.580855 C9.41406892,142.380855 7.91406892,125.280855 10.9140689,107.680855 C12.2140689,100.380855 14.2140689,93.3808546 16.4140689,86.2808546 C16.4140689,86.2808546 30.2140689,40.9808546 76.9140689,20.2808546 C76.9140689,20.2808546 93.0140689,11.7808546 117.214069,11.1808546 C117.214069,11.1808546 113.914069,7.98085459 111.814069,6.58085459 C100.414069,-1.01914541 83.4140689,-3.51914541 73.1140689,7.18085459 C70.0140689,10.3808546 67.4140689,13.8808546 64.5140689,17.0808546 C61.2140689,20.6808546 57.2140689,23.6808546 52.6140689,25.3808546 C48.6140689,26.8808546 44.6140689,26.5808546 40.5140689,27.2808546 C36.3140689,27.9808546 32.0140689,29.4808546 28.6140689,32.1808546 C24.9140689,35.1808546 23.4140689,39.1808546 23.0140689,43.7808546 C22.6140689,47.3808546 22.7140689,51.0808546 22.5140689,54.6808546 C22.0140689,65.2808546 18.6140689,68.2808546 11.0140689,74.1808546 C7.81406892,76.5808546 5.11406892,79.7808546 3.11406892,83.1808546 C-2.88593108,93.7808546 6.71406892,104.780855 7.21406892,115.480855 C7.31406892,117.680855 7.11406892,119.880855 6.31406892,121.980855 C5.51406892,124.280855 3.91406892,125.780855 2.61406892,127.680855 C0.814068923,130.180855 -0.385931077,133.180855 0.114068923,136.280855 C0.614068923,139.380855 2.21406892,142.280855 3.71406892,144.980855 C6.61406892,149.780855 10.2140689,154.080855 14.0140689,158.180855 C14.2140689,158.180855 14.4140689,158.380855 14.6140689,158.580855"/>
|
||||
<path fill="url(#a)" d="M205.414069,196.980855 C228.414069,186.980855 238.214069,169.680855 238.214069,169.680855 C259.714069,140.380855 252.414069,109.480855 252.414069,109.480855 C238.714069,139.280855 226.214069,147.480855 226.214069,147.480855 C259.914069,96.1808546 226.414069,65.1808546 226.414069,65.1808546 C240.114069,94.3808546 221.914069,129.980855 221.914069,129.980855 C206.614069,162.180855 184.914069,173.680855 184.914069,173.680855 C209.114069,178.180855 226.914069,161.880855 226.914069,161.880855 C192.214069,199.380855 154.614069,197.580855 154.614069,197.580855 C170.414069,215.280855 194.114069,213.780855 194.114069,213.780855 C163.114069,221.080855 134.014069,210.780855 110.114069,190.880855 C105.614069,187.180855 101.314069,183.180855 97.3140689,178.880855 C97.3140689,178.880855 93.7140689,175.080855 93.0140689,174.080855 L92.9140689,173.980855 C92.4140689,192.480855 111.714069,209.680855 111.714069,209.680855 C87.5140689,199.680855 76.4140689,177.980855 76.4140689,177.980855 C76.4140689,177.980855 60.1140689,150.180855 71.9140689,118.480855 C83.7140689,86.7808546 119.414069,79.9808546 119.414069,79.9808546 C148.914069,94.2808546 173.914069,98.7808546 173.914069,98.7808546 C226.614069,107.580855 223.614069,81.7808546 223.614069,81.7808546 C224.114069,59.5808546 190.614069,35.9808546 190.614069,35.9808546 C130.914069,-8.31914541 76.9140689,20.2808546 76.9140689,20.2808546 C30.2140689,40.9808546 16.4140689,86.2808546 16.4140689,86.2808546 C14.2140689,93.3808546 12.2140689,100.380855 10.9140689,107.680855 C5.81406892,137.380855 13.5140689,165.480855 30.2140689,190.480855 C56.2140689,229.280855 98.4140689,242.680855 98.4140689,242.680855 C160.914069,263.880855 203.614069,232.680855 203.614069,232.680855 C242.914069,205.680855 250.814069,174.480855 250.814069,174.480855 C219.114069,199.280855 205.414069,196.980855 205.414069,196.980855 Z M156.614069,51.0808546 C159.614069,51.0808546 162.014069,53.4808546 162.014069,56.4808546 C162.014069,59.4808546 159.614069,61.8808546 156.614069,61.8808546 C153.614069,61.8808546 151.214069,59.4808546 151.214069,56.4808546 C151.214069,53.4808546 153.614069,51.0808546 156.614069,51.0808546 Z"/>
|
||||
<path fill="url(#b)" d="M223.514069,81.6808546 C224.014069,59.4808546 190.514069,35.8808546 190.514069,35.8808546 C130.814069,-8.31914541 76.8140689,20.2808546 76.8140689,20.2808546 C30.1140689,40.9808546 16.3140689,86.2808546 16.3140689,86.2808546 C13.6140689,93.9808546 11.2140689,105.780855 11.2140689,105.780855 C8.31406892,120.580855 9.61406892,134.280855 9.61406892,134.280855 C10.8140689,147.380855 13.7140689,156.180855 13.7140689,156.180855 C16.7140689,165.580855 18.1140689,168.480855 18.1140689,168.480855 C18.0140689,168.180855 17.5140689,165.980855 17.5140689,165.980855 C17.5140689,165.980855 13.3140689,145.780855 17.2140689,126.380855 C17.2140689,126.380855 20.6140689,106.180855 34.4140689,90.5808546 C34.4140689,90.5808546 56.8140689,58.6808546 98.5140689,71.1808546 C98.5140689,71.1808546 107.514069,74.3808546 110.614069,75.9808546 C113.714069,77.4808546 119.114069,79.7808546 119.114069,79.7808546 C148.614069,94.0808546 173.614069,98.5808546 173.614069,98.5808546 C226.514069,107.480855 223.514069,81.6808546 223.514069,81.6808546 L223.514069,81.6808546 Z M156.614069,61.9808546 C153.614069,61.9808546 151.214069,59.5808546 151.214069,56.5808546 C151.214069,53.5808546 153.614069,51.1808546 156.614069,51.1808546 C159.614069,51.1808546 162.014069,53.5808546 162.014069,56.5808546 C162.014069,59.5808546 159.614069,61.9808546 156.614069,61.9808546 Z"/>
|
||||
<path fill="url(#c)" d="M122.414069,41.4808546 L88.3140689,30.8808546 C88.1140689,30.8808546 87.1140689,30.3808546 85.3140689,30.8808546 C85.3140689,30.8808546 65.2140689,35.9808546 68.7140689,46.9808546 C68.7140689,46.9808546 70.8140689,53.8808546 76.5140689,60.5808546 L114.014069,58.7808546 L122.414069,41.4808546 Z"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
269
docs/rxjs.md
269
docs/rxjs.md
@ -1,7 +1,7 @@
|
||||
RxJS 备忘清单
|
||||
===
|
||||
|
||||
RxJS（Reactive Extensions for JavaScript）是一个强大的库，用于处理异步事件和数据流。以下是 RxJS 的一些关键概念、操作符和方法的总结。
|
||||
[RxJS](https://rxjs.dev/)（Reactive Extensions for JavaScript）是一个强大的库，用于处理异步事件和数据流。以下是 RxJS 的一些关键概念、操作符和方法的总结。
|
||||
|
||||
## 入门
|
||||
|
||||
@ -11,37 +11,100 @@ RxJS（Reactive Extensions for JavaScript）是一个强大的库，用于处理
|
||||
npm install rxjs
|
||||
```
|
||||
|
||||
### 清晰
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
RxJS 的强大之处在于它使用纯函数生成值的能力。这意味着您的代码更不容易出错。通常情况下，您会创建一个不纯的函数，而代码的其他部分可能会弄乱您的状态。
|
||||
|
||||
```js
|
||||
let count = 0;
|
||||
document.addEventListener('click', () => {
|
||||
console.log(`Clicked ${++count} times`)
|
||||
});
|
||||
```
|
||||
|
||||
使用 RxJS 可以隔离状态。
|
||||
|
||||
```js
|
||||
import { fromEvent, scan } from 'rxjs';
|
||||
|
||||
fromEvent(document, 'click')
|
||||
.pipe(scan((count) => count + 1, 0))
|
||||
.subscribe((count) => {
|
||||
console.log(`Clicked ${count} times`)
|
||||
});
|
||||
```
|
||||
|
||||
扫描操作符的工作原理与数组的 `reduce` 类似。它接受一个暴露给回调函数的值。回调的返回值将成为下次回调运行时公开的下一个值。
|
||||
|
||||
### 流
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
RxJS 拥有一整套运算符，可以帮助您控制事件如何流经您的可观察对象。这是使用纯 JavaScript 每秒最多允许一次点击的方式：
|
||||
|
||||
```js
|
||||
let count = 0;
|
||||
let rate = 1000;
|
||||
let lastClick = Date.now() - rate;
|
||||
document.addEventListener('click', () => {
|
||||
if (Date.now() - lastClick >= rate) {
|
||||
console.log(`Clicked ${++count}times`);
|
||||
lastClick = Date.now();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
使用 RxJS：
|
||||
|
||||
```js
|
||||
import { fromEvent, throttleTime, scan
|
||||
} from 'rxjs';
|
||||
|
||||
fromEvent(document, 'click')
|
||||
.pipe(throttleTime(1000),
|
||||
scan((count) => count + 1, 0)
|
||||
)
|
||||
.subscribe((count) => {
|
||||
console.log(`Clicked ${count} times`)
|
||||
});
|
||||
```
|
||||
|
||||
### 第一个示例
|
||||
|
||||
通常情况下，您需要注册事件监听器。
|
||||
|
||||
```js
|
||||
document.addEventListener('click', () => {
|
||||
console.log('Clicked!')
|
||||
});
|
||||
```
|
||||
|
||||
使用 [RxJS](https://rxjs.dev/)，您可以创建一个可观察对象。
|
||||
|
||||
```js
|
||||
import { fromEvent } from 'rxjs';
|
||||
|
||||
fromEvent(document, 'click')
|
||||
.subscribe(() => {
|
||||
console.log('Clicked!')
|
||||
});
|
||||
```
|
||||
|
||||
### 导入所需的 Observable 和操作符
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```javascript
|
||||
import { Observable, of, from, interval, fromEvent } from 'rxjs';
|
||||
import {
|
||||
map,
|
||||
filter,
|
||||
switchMap,
|
||||
mergeMap,
|
||||
catchError,
|
||||
debounceTime,
|
||||
distinctUntilChanged,
|
||||
take,
|
||||
tap,
|
||||
concatMap,
|
||||
delay,
|
||||
retryWhen,
|
||||
scan,
|
||||
combineLatest,
|
||||
concat,
|
||||
merge,
|
||||
forkJoin,
|
||||
withLatestFrom,
|
||||
startWith,
|
||||
reduce
|
||||
|
||||
import { map, filter, switchMap, mergeMap, catchError, debounceTime,
|
||||
distinctUntilChanged, take, tap, concatMap, delay, retryWhen, scan,
|
||||
combineLatest, concat, merge, forkJoin, withLatestFrom, startWith, reduce
|
||||
} from 'rxjs/operators';
|
||||
```
|
||||
|
||||
## 创建 Observable
|
||||
|
||||
### of - 创建一个立即发送指定值并完成的 Observable
|
||||
### of
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3);
|
||||
@ -49,7 +112,9 @@ obs.subscribe(console.log);
|
||||
// 输出: 1 2 3
|
||||
```
|
||||
|
||||
### from - 从 Promise、数组、可迭代对象创建 Observable
|
||||
创建一个立即发送指定值并完成的 Observable
|
||||
|
||||
### from
|
||||
|
||||
```javascript
|
||||
const obs = from([1, 2, 3]);
|
||||
@ -57,7 +122,9 @@ obs.subscribe(console.log);
|
||||
// 输出: 1 2 3
|
||||
```
|
||||
|
||||
### interval - 创建一个定时发送递增整数的 Observable
|
||||
从 Promise、数组、可迭代对象创建 Observable
|
||||
|
||||
### interval
|
||||
|
||||
```javascript
|
||||
const obs = interval(1000);
|
||||
@ -65,17 +132,24 @@ obs.subscribe(console.log);
|
||||
// 每秒输出一次递增的数字
|
||||
```
|
||||
|
||||
### fromEvent - 从 DOM 事件创建 Observable
|
||||
创建一个定时发送递增整数的 Observable
|
||||
|
||||
### fromEvent
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```javascript
|
||||
const button = document.querySelector('button');
|
||||
const obs = fromEvent(button, 'click');
|
||||
obs.subscribe(event => console.log('Button clicked!', event));
|
||||
obs.subscribe(event => {
|
||||
console.log('Button clicked!', event)
|
||||
});
|
||||
```
|
||||
|
||||
从 DOM 事件创建 Observable
|
||||
|
||||
## 操作符
|
||||
|
||||
### map - 对 Observable 发出的每个值应用一个函数
|
||||
### map
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
@ -85,7 +159,9 @@ obs.subscribe(console.log);
|
||||
// 输出: 2 4 6
|
||||
```
|
||||
|
||||
### filter - 过滤 Observable 发出的值
|
||||
对 Observable 发出的每个值应用一个函数
|
||||
|
||||
### filter
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
@ -95,27 +171,35 @@ obs.subscribe(console.log);
|
||||
// 输出: 2
|
||||
```
|
||||
|
||||
### switchMap - 将 Observable 每个值映射成 Observable 并订阅，前一个订阅将被取消
|
||||
过滤 Observable 发出的值
|
||||
|
||||
### switchMap
|
||||
|
||||
```javascript
|
||||
const obs = interval(1000).pipe(
|
||||
switchMap(() => of('Hello'))
|
||||
);
|
||||
|
||||
obs.subscribe(console.log);
|
||||
// 每秒输出一次 "Hello"
|
||||
```
|
||||
|
||||
### mergeMap - 类似 switchMap，但允许多个内部 Observable 并发执行
|
||||
将 Observable 每个值映射成 Observable 并订阅，前一个订阅将被取消
|
||||
|
||||
### mergeMap
|
||||
|
||||
```javascript
|
||||
const obs = interval(1000).pipe(
|
||||
mergeMap(() => of('Hello'))
|
||||
);
|
||||
|
||||
obs.subscribe(console.log);
|
||||
// 每秒输出一次 "Hello"
|
||||
```
|
||||
|
||||
### catchError - 捕获 Observable 链中的错误
|
||||
类似 switchMap，但允许多个内部 Observable 并发执行
|
||||
|
||||
### catchError
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
@ -123,22 +207,28 @@ const obs = of(1, 2, 3).pipe(
|
||||
if (x === 2) throw 'Error!';
|
||||
return x;
|
||||
}),
|
||||
catchError(err => of('Caught an error: ' + err))
|
||||
catchError(err => of('发现一个错误：'+err))
|
||||
);
|
||||
obs.subscribe(console.log);
|
||||
// 输出: 1 Caught an error: Error!
|
||||
// 输出: 1 发现一个错误：Error!
|
||||
```
|
||||
|
||||
### debounceTime - 延迟处理，直到源 Observable 停止发出数据一定时间
|
||||
捕获 Observable 链中的错误
|
||||
|
||||
### debounceTime
|
||||
|
||||
```javascript
|
||||
const obs = fromEvent(document, 'mousemove').pipe(
|
||||
debounceTime(300)
|
||||
);
|
||||
obs.subscribe(event => console.log('Mouse moved!', event));
|
||||
const obs = fromEvent(document,'mousemove')
|
||||
.pipe(debounceTime(300));
|
||||
|
||||
obs.subscribe(event => {
|
||||
console.log('Mouse moved!', event)
|
||||
});
|
||||
```
|
||||
|
||||
### distinctUntilChanged - 忽略连续重复的值
|
||||
延迟处理，直到源 Observable 停止发出数据一定时间
|
||||
|
||||
### distinctUntilChanged
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 1, 2, 2, 3, 3).pipe(
|
||||
@ -148,7 +238,9 @@ obs.subscribe(console.log);
|
||||
// 输出: 1 2 3
|
||||
```
|
||||
|
||||
### take - 只发出前 n 个值
|
||||
忽略连续重复的值
|
||||
|
||||
### take
|
||||
|
||||
```javascript
|
||||
const obs = interval(1000).pipe(
|
||||
@ -158,19 +250,26 @@ obs.subscribe(console.log);
|
||||
// 输出: 0 1 2
|
||||
```
|
||||
|
||||
只发出前 n 个值
|
||||
|
||||
## 组合操作符
|
||||
|
||||
### combineLatest - 当两个 Observable 都发出新的值时，发出它们的组合
|
||||
### combineLatest
|
||||
|
||||
```javascript
|
||||
const obs1 = interval(1000);
|
||||
const obs2 = of('A', 'B', 'C');
|
||||
const combined = combineLatest([obs1, obs2]);
|
||||
const combined = combineLatest(
|
||||
[obs1, obs2]
|
||||
);
|
||||
|
||||
combined.subscribe(console.log);
|
||||
// 每秒输出一次两个 observables 的最新值
|
||||
```
|
||||
|
||||
### concat - 按顺序连接多个 Observable
|
||||
当两个 Observable 都发出新的值时，发出它们的组合
|
||||
|
||||
### concat
|
||||
|
||||
```javascript
|
||||
const obs1 = of(1, 2, 3);
|
||||
@ -180,17 +279,25 @@ combined.subscribe(console.log);
|
||||
// 输出: 1 2 3 4 5 6
|
||||
```
|
||||
|
||||
### merge - 将多个 Observable 合并为一个
|
||||
按顺序连接多个 Observable
|
||||
|
||||
### merge
|
||||
|
||||
```javascript
|
||||
const obs1 = interval(1000).pipe(map(x => 'A' + x));
|
||||
const obs2 = interval(500).pipe(map(x => 'B' + x));
|
||||
const obs1 = interval(1000).pipe(
|
||||
map(x => 'A' + x)
|
||||
);
|
||||
const obs2 = interval(500).pipe(
|
||||
map(x => 'B' + x)
|
||||
);
|
||||
const combined = merge(obs1, obs2);
|
||||
combined.subscribe(console.log);
|
||||
// 每秒输出 "A" 和 "B" 开头的递增数字
|
||||
```
|
||||
|
||||
### forkJoin - 等待所有 Observable 完成，然后发出它们的最后一个值的数组
|
||||
将多个 Observable 合并为一个
|
||||
|
||||
### forkJoin
|
||||
|
||||
```javascript
|
||||
const obs1 = of(1, 2, 3);
|
||||
@ -200,25 +307,29 @@ combined.subscribe(console.log);
|
||||
// 输出: [3, 'C']
|
||||
```
|
||||
|
||||
等待所有 Observable 完成，然后发出它们的最后一个值的数组
|
||||
|
||||
## 错误处理
|
||||
|
||||
### retryWhen - 在 Observable 发出错误时重试
|
||||
### retryWhen
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```javascript
|
||||
const obs = throwError('Something went wrong!').pipe(
|
||||
const obs = throwError('出了些问题！')
|
||||
.pipe(
|
||||
retryWhen(errors =>
|
||||
errors.pipe(
|
||||
delayWhen(() => interval(1000))
|
||||
errors.pipe(delayWhen(() => interval(1000)))
|
||||
)
|
||||
)
|
||||
);
|
||||
);
|
||||
obs.subscribe(console.log, console.error);
|
||||
// 输出: Something went wrong! (每秒重试一次)
|
||||
// 输出: 出了些问题！ (每秒重试一次)
|
||||
```
|
||||
|
||||
在 Observable 发出错误时重试
|
||||
|
||||
## 实用操作符
|
||||
|
||||
### tap - 用于记录、测量或执行副作用操作
|
||||
### tap
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
@ -227,10 +338,13 @@ const obs = of(1, 2, 3).pipe(
|
||||
tap(x => console.log(`After: ${x}`))
|
||||
);
|
||||
obs.subscribe();
|
||||
// 输出: Before: 1, After: 2, Before: 2, After: 4, Before: 3, After: 6
|
||||
// 输出: Before: 1, After: 2, Before: 2,
|
||||
// After: 4, Before: 3, After: 6
|
||||
```
|
||||
|
||||
### startWith - 在 Observable 序列前添加值
|
||||
用于记录、测量或执行副作用操作
|
||||
|
||||
### startWith
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
@ -240,7 +354,9 @@ obs.subscribe(console.log);
|
||||
// 输出: 0 1 2 3
|
||||
```
|
||||
|
||||
### scan - 对 Observable 发出的每个值应用累加器函数
|
||||
在 `Observable` 序列前添加值
|
||||
|
||||
### scan
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
@ -250,40 +366,45 @@ obs.subscribe(console.log);
|
||||
// 输出: 1 3 6
|
||||
```
|
||||
|
||||
### reduce - 对 Observable 发出的值进行累加
|
||||
对 `Observable` 发出的每个值应用累加器函数
|
||||
|
||||
### reduce
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
reduce((acc, value) => acc + value, 0)
|
||||
);
|
||||
const obs = of(1, 2, 3).pipe(reduce((acc, value) => acc + value, 0));
|
||||
obs.subscribe(console.log);
|
||||
// 输出: 6
|
||||
```
|
||||
|
||||
### delay - 延迟 Observable 发出数据的时间
|
||||
对 `Observable` 发出的值进行累加
|
||||
|
||||
### delay
|
||||
|
||||
```javascript
|
||||
const obs = of('Hello').pipe(
|
||||
delay(2000)
|
||||
);
|
||||
const obs = of('Hello').pipe(delay(2000));
|
||||
obs.subscribe(console.log);
|
||||
// 输出: 'Hello' (延迟2秒)
|
||||
```
|
||||
|
||||
## 调度器
|
||||
延迟 `Observable` 发出数据的时间
|
||||
|
||||
调度器
|
||||
---
|
||||
|
||||
### 调度器说明
|
||||
|
||||
调度器（Scheduler）控制着 RxJS 操作的执行时机。常见的调度器有：
|
||||
|
||||
- `asyncScheduler`：异步执行任务。
|
||||
- `queueScheduler`：按队列顺序执行任务。
|
||||
- `animationFrameScheduler`：在浏览器的下一次重绘前执行任务。
|
||||
- `asyncScheduler`：异步执行任务
|
||||
- `queueScheduler`：按队列顺序执行任务
|
||||
- `animationFrameScheduler`：在浏览器的下一次重绘前执行任务
|
||||
|
||||
### 示例
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```javascript
|
||||
const obs = of(1, 2, 3).pipe(
|
||||
observeOn(asyncScheduler)
|
||||
);
|
||||
const obs = of(1, 2, 3).pipe(observeOn(asyncScheduler));
|
||||
|
||||
console.log('Before subscribe');
|
||||
obs.subscribe(console.log);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user