0
314
Visualizações¿Me pueden ayudar a entender cómo funcionan las tuberías en javascript?
Estoy leyendo un libro llamado Learning React, 2nd Edition . Hay una sección sobre composición de funciones en la sección de programación funcional. El fragmento de código y la explicación proporcionada no son muy claros para mí. Aquí está el fragmento de código del libro: 
Aquí está el código anterior en el fragmento de código:
const both = compose( civilianHours, appendAMPM ): both(new Date()); const compose = (...fns) => arg => fns.reduce((compose, f) => f(composed), arg);No entiendo lo que el autor está tratando de explicar aquí. Aquí está la explicación proporcionada por el libro para este fragmento.
La función componer es una función de orden superior. Toma funciones como argumentos y devuelve un solo valor. componer toma funciones como argumentos y devuelve una sola función. En esta implementación, el operador de propagación se usa para convertir esos argumentos de función en una matriz llamada fns. Luego se devuelve una función que espera un argumento, arg . Cuando se invoca esta función, la matriz fns se canaliza comenzando con el argumento que queremos enviar a través de la función. El argumento se convierte en el valor inicial para compose , luego regresa cada iteración de la devolución de llamada reducida. Tenga en cuenta que la devolución de llamada toma dos argumentos: compuesto y una función f . Cada función se invoca con compose , que es el resultado de la salida de la función anterior. Eventualmente, se invocará la última función y se devolverá el último resultado.
Entonces, ¿alguien puede explicarme cómo funciona la tubería de funciones en javascript con algunos ejemplos? Sería bueno si alguien también pudiera explicar el fragmento de código anterior. Especialmente lo que está haciendo el arg sentado allí.
Aquí hay otro fragmento de código para la misma pregunta:
const add2 = (x) => x + 2; const subtract1 = (x) => x - 1; const multiplyBy5 = (x) => x * 5; const pipe = (...fns) => (val) => fns.reduce((prev, fn) => fn(prev), val); const pipeResult = pipe(add2, subtract1, multiplyBy5)(5); console.log(pipeResult); // = 301 Respostas
Responde à pergunta0
Podría ser más claro si usamos un bucle en lugar de reduce ( reduce puede ser difícil de leer) y usamos la forma detallada de la función de flecha en lugar de la concisa:
const compose = (...fns) => { return (arg) => { let composed = arg; for (const fn of fns) { composed = fn(composed); } return composed; }; }; compose acepta un montón de funciones como argumentos discretos, reuniéndolos todos en una matriz con un parámetro de descanso ( ...fns ). Devuelve una función que acepta un solo parámetro ( arg ). Cuando llama a esa función, recorre las funciones en fns . La primera función obtiene arg (que he copiado para composed arriba). El código toma el resultado de llamar a la primera función para dárselo a la siguiente, luego mantiene el resultado de llamar a eso para llamar a la siguiente, etc., y finalmente devuelve el último resultado cuando se queda sin funciones.
En both ejemplos, básicamente está haciendo esto:
let firstResult = civilianHours(new Date()); let composed = appendAMPM(firstResult); // Or let composed = appendAMPM(civilianHours(new Date())); (Excepto, curiosamente, el ejemplo del libro no usa el valor de retorno de both ).
El concepto de "tubería" proviene del hecho de que compose básicamente presenta las funciones que recibe en una fila, donde cada función pasa su resultado a la función siguiente, como una serie de tuberías conectadas por las que fluye un líquido:
arg −−−> sumar2 −−−> restar1 −−−> multiplicar por5 −−−> resultado
Aquí hay un ejemplo en vivo del ejemplo matemático al final de la pregunta, con algunos registros para ayudar a mostrar lo que está pasando:
const compose = (...fns) => { console.log(`Creating function to do ${fns.map(fn => fn.name).join(" => ")}`); return (arg) => { let composed = arg; for (const fn of fns) { const msg = `${fn.name}(${composed})`; composed = fn(composed); console.log(`${msg} returns ${composed}`); } return composed; }; }; const add2 = (x) => x + 2; const subtract1 = (x) => x - 1; const multiplyBy5 = (x) => x * 5; const pipeResult = compose(add2, subtract1, multiplyBy5)(5); console.log(pipeResult); // = 30