Fin sección 6

Author: alesyt0h

src/operadores/07-take.ts

@@ -0,0 +1,14 @@
+import { of } from 'rxjs';
+import { take, tap } from 'rxjs/operators';
+
+const numeros$ = of(1,2,3,4,5).pipe(
+    // tap(console.log)
+);
+
+numeros$.pipe(
+    tap(console.log),
+    take(3)
+).subscribe({
+    next: val => console.log('next:', val),
+    complete: () => console.log('complete')
+})

src/operadores/08-first.ts

@@ -0,0 +1,23 @@
+import { fromEvent } from 'rxjs';
+import { tap, first, map, pluck } from 'rxjs/operators';
+
+const click$ = fromEvent<PointerEvent>(document,'click');
+
+click$.pipe(
+    tap<PointerEvent>(console.log),
+    // map(event => ({
+    //     clientX: event.clientX,
+    //     clientY: event.clientY
+    // }))
+    // Resumido =>
+    map(({ clientX, clientY }) => ({ clientX, clientY })),
+    first(event => event.clientY >= 150),
+    //
+    // With Pluck
+    //
+    // pluck('clientY'),
+    // first(event => event >= 150)
+).subscribe({
+    next: val => console.log('next:', val),
+    complete: () => console.log('complete')
+});

src/operadores/09-takeWhile.ts

@@ -0,0 +1,15 @@
+import { fromEvent } from 'rxjs';
+import { map, takeWhile } from 'rxjs/operators';
+
+const click$ = fromEvent<PointerEvent>(document,'click');
+
+
+
+click$.pipe(
+    map(({x,y}) => ({x,y})),
+    takeWhile(({ y }) => y <= 150, true)
+)
+.subscribe({
+    next: (val) => console.log('next',val),
+    complete: () => console.log('complete')
+});

src/operadores/10-takeUntil-skip.ts

@@ -0,0 +1,25 @@
+import { interval, fromEvent } from 'rxjs';
+import { takeUntil, tap, skip } from 'rxjs/operators';
+
+const boton = document.createElement('button');
+boton.innerHTML = 'Detener Timer';
+document.body.append(boton);
+
+const counter$  = interval(1000);
+// const clickBtn$ = fromEvent(boton,'click');
+const clickBtn$ = fromEvent(boton,'click').pipe(
+    tap(() => console.log('tap antes del skip')),
+    skip(1),
+    tap(() => console.log('tap después del skip')),
+);
+
+const sub = counter$.pipe(
+    // takeUntil(fromEvent(boton,'click'))
+    takeUntil(clickBtn$)
+)
+.subscribe({
+    next: val => console.log('next:',val),
+    complete: () => console.log('completed')
+});
+
+

src/operadores/11-distinct.ts

@@ -0,0 +1,27 @@
+import { of, from } from 'rxjs';
+import { distinct } from 'rxjs/operators';
+
+const numeros$ = of(1,'1',1,3,3,2,2,4,4,5,3,1);
+
+numeros$.pipe(
+    distinct() // El distinct usa ===, se podria usar 1 como numero y 1 como string, por que no son iguales
+)
+.subscribe(console.log)
+
+interface Personaje {
+    nombre: string;
+}
+
+const personajes: Personaje[] = [
+    { nombre: 'Megaman' },
+    { nombre: 'X' },
+    { nombre: 'Zero' },
+    { nombre: 'Dr. Willy' },
+    { nombre: 'X' },
+    { nombre: 'Megaman' },
+    { nombre: 'Zero' },
+]
+
+from(personajes).pipe(
+    distinct(p => p.nombre)
+).subscribe(console.log);

src/operadores/12-distinctUntilChanged.ts

@@ -0,0 +1,27 @@
+import { of, from } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+const numeros$ = of(1,'1',1,3,3,2,2,4,4,5,3,1,'1');
+
+numeros$.pipe(
+    distinctUntilChanged() // El distinct usa ===, se podria usar 1 como numero y 1 como string, por que no son iguales
+)
+.subscribe(console.log)
+
+interface Personaje {
+    nombre: string;
+}
+
+const personajes: Personaje[] = [
+    { nombre: 'Megaman' },
+    { nombre: 'Megaman' },
+    { nombre: 'Zero' },
+    { nombre: 'Dr. Willy' },
+    { nombre: 'X' },
+    { nombre: 'X' },
+    { nombre: 'Zero' },
+]
+
+from(personajes).pipe(
+    distinctUntilChanged( (ant, act) => ant.nombre === act.nombre )
+).subscribe(console.log);

src/operadores/13-distinctUntilKeyChanged.ts

@@ -0,0 +1,20 @@
+import { from } from 'rxjs';
+import { distinctUntilKeyChanged } from 'rxjs/operators';
+
+interface Personaje {
+    nombre: string;
+}
+
+const personajes: Personaje[] = [
+    { nombre: 'Megaman' },
+    { nombre: 'Megaman' },
+    { nombre: 'Zero' },
+    { nombre: 'Dr. Willy' },
+    { nombre: 'X' },
+    { nombre: 'X' },
+    { nombre: 'Zero' },
+]
+
+from(personajes).pipe(
+    distinctUntilKeyChanged('nombre')
+).subscribe(console.log);