Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan ยท April More text challenge”. Click here for more details.

RxJS conversion operator, keep storming! The familiar know the new, unfamiliar mix a face familiar ~

buffer

A buffer is a “cache” that collects values under certain conditions and then emits the collected values under certain conditions. In addition to buffer, there are similar:

  • BufferCount: Collects issued values and does not issue them as an array until the supplied number of values has been collected.
  • BufferTime: Collects emitted values until the supplied time has elapsed before they are emitted as an array.
  • BufferToggle: turns on the switch to capture the values emitted by the source Observable, and turns off the switch to emit the buffered values as an array.
  • BufferWhen: Collects the value and does not emit the buffered value until the selector emits the value is closed

The use method is basically the same, simply understood as: station security, when there are a lot of people, there will be a special person in the card, control the flow, when the card is set up under a certain condition, you can put the card, the conditions here can be: quantity, time, custom open, other conditions value;

e.g.

// Create observable emitted every second const myInterval = interval(1000); Observable const bufferBy = fromEvent(document, 'click'); /* Collect all values emitted by myInterval until we click the page. BufferBy emits the value to complete the cache. Passes all values collected since the last buffering to the array. */ const myBufferedInterval = myInterval.pipe(buffer(bufferBy)); // prints the value to the console // for example: [1,2,3]... ,5,6,7,8 [4] const subscribe = myBufferedInterval. Subscribe (val = > console. The log (' Buffered Values: ', val));Copy the code

concatMap

ConcatMap maps values, and a similar one is mergeMap, which is a Reduce promise and a PromiseAll.

// concatMap // emit 'Hello' and 'Goodbye' const source = of('Hello', 'Goodbye'); // Example using promise const examplePromise = val => new promise (resolve => resolve(' ${val} World! `)); Const example = source.pipe(concatMap(val => examplePromise(val)))); // Map the source value to an internal Observable. // Output: 'Example w/ Promise: 'Hello World', Example w/ Promise: 'Goodbye World' const subscribe = example.subscribe(val => console.log('Example w/ Promise:', val) ); // mergeMap // emit 'Hello' const source = of('Hello'); Const myPromise = val => new promise (resolve => resolve(' ${val} World From promise! `)); Const example = source.pipe(mergeMap(val => myPromise(val))); // output: 'Hello World From Promise' const subscribe = example.subscribe(val => console.log(val));Copy the code

map

The map is critical because it applies a projection function to every value of the source Observable.

/ / a (1, 2, 3, 4, 5) const source = the from ([1, 2, 3, 4, 5)); // Add 10 const example = source.pipe(map(val => val + 10)); // output: 11,12,13,14,15 const subscribe = example.subscribe(val => console.log(val));Copy the code

reduce

Also common is reduce, which merges the value of the source Observalbe into a single value and emits it when the source Observable completes.

const source = of(1, 2, 3, 4); const example = source.pipe(reduce((acc, val) => acc + val)); // output: Sum: 10' const subscribe = example.subscribe(val => console.log('Sum:', val));Copy the code

window

The window operator is an Observable of time window values.

// RxJS v6+ import { timer, interval } from 'rxjs'; import { window, scan, mergeAll } from 'rxjs/operators'; Const source = timer(0, 1000); const example = source.pipe(window(interval(3000))); const count = example.pipe(scan((acc, curr) => acc + 1, 0)); /* "Window 1:" 0 1 2 "Window 2:" 3 4 5 ... */ const subscribe = count.subscribe(val => console.log(`Window ${val}:`)); const subscribeTwo = example .pipe(mergeAll()) .subscribe(val => console.log(val));Copy the code

In addition to: Window, there are also its derivatives windowCount, windowTime, windowToggle, windowWhen. It is also similar to a derivative of buffer.

  • 3 minutes review new RxJS create instance operator
  • Are you functional responsive programming (FRP)? ! ใ€ RxJS ใ€‘
  • Why: The observed is push data and the iterator is pull data?
  • Why does RxJS Observable look the way it does? !
  • Callback=>Promise=>Observer
  • Continues with asynchronous processing — RxJS Observable

I’m Nuggets Anthony, output exposure input, technical insights into life, goodbye ~ ๐Ÿ‘๐Ÿ‘๐Ÿ‘