Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fin sección 5

Choose a tag to compare

@alesyt0h alesyt0h released this 28 Sep 08:10
· 7 commits to main since this release

Operadores básicos

  • map: Nos permite transformar lo que emite el observable por lo que nososotros queramos, se puede usar para desestructurar el valor emitido. En el caso que map no pueda encontrar la propiedad de un objeto anidado se deberia usar de la siguiente manera: map( event => event.target['value'] )
  • mapTo: Transforma las emisiones del observable a una salida específica: mapTo('Hola Mundo')
  • pluck: (Deprecated) Permite extraer la propiedad de un objeto. pluck('target') -- pluck('target', 'value')
  • filter: Nos permite filtrar las emisiones que emiten los observables con una condición especifica. filter(value => value % 2 === 1 Solo llegarian a la salida los números impares.
  • tap: Operador para ejecutar acciones secundarias. Ya sea mostrar en consola, como disparar otro operador para efectuar otra accion, etc…
  • reduce: Aplica una función acumuladora a las emisiones producidas por el observable:
// Recibe el valor acumulado y el actual. Retorna el valor acumulado sumado al actual. 
// Pero sólo emitira cuando se completa el observable, retornando el valor total.
reduce( (acc, cur) => acc + cur, 0 )
  • scan: Exactamente lo mismo al operador reduce, la única diferencia es que los valores son emitidos a la salida mostrando el valor acumulado.
  • Laboratorio progressBar: Creación de un progressBar al hacer scroll que se va rellenando en función de cuanto scroll hagamos en la página, usando fromEvent para escuchar el evento scroll, map para enviar el evento a una función que en base a scrollHeight, scrollTop y clientHeight, calcula el porcentaje actual de scroll en la página y modifica el style.width con el porcentaje recibido.