Tabla de contenido
Prefacio
Este artículo presentará un concepto de función de JavaScript muy importante: función de orden superior (función de orden superior)
Una función de orden superior es una función que toma una o más funciones como parámetros o devuelve una función como resultado.
En este artículo, profundizaremos en qué son las funciones de orden superior, los beneficios de usarlas y cómo usarlas en aplicaciones del mundo real.
- ¿Qué es la orientación funcional?
- Función pura
- Función de orden superior
- Zurra
¿Qué es la orientación funcional?
La llamada orientación de función, en pocas palabras, la función en sí es una variable. Por ejemplo: la función en sí se puede declarar usando const, let y var, y se puede convertir en un argumento (Argumento) y pasar a otras funciones, o se puede agregar a una matriz u objeto.
Convertir una función en un argumento y pasarlo a otras funciones
const print = (mensaje) => { console.log(`imprimir función con ${mensaje}`) } const helloMessage = () => { return "Hola Mensaje" } print(helloMessage() // imprimir función con Hola mensaje
Unirse a la matriz
const array = ["item0", (mensaje) => console.log("Soy función de elemento en la matriz " + mensaje)] console.log(array[0]); // item0 array[1]("argumento) "); // Soy una función de elemento en un argumento de matriz
Agregar objetos
const object = { holaMundo: "Hola mundo", imprimir: (mensaje) => { console.log(`función de impresión con ${mensaje}`) } } object.print(object.helloWorld); Mundo
Función pura
Cuando una función solo se ve afectada por argumentos (Argumento), la llamamos función pura (Función pura). Una función tan pura, debido a que no será interferida por otras cosas, está encapsulada y no será interferida por otras variables y argumentos, es decir, tendrá efectos secundarios (efecto secundario).
El llamado efecto secundario se refiere a los cambios externos que ocurren durante la ejecución de la función.
- Utilice Date.now() o Math.random()
- Utilice consola.log()
- Modificar datos externos
- Manipular el DOM
- Iniciar una solicitud HTTP
Veamos el siguiente ejemplo. Este ejemplo es una función impura y cuando se modifican datos externos, la función se verá afectada.
let y = 1; función xAdd(x) { return x + y };
Se puede ver que incluso si se ejecuta xAdd (5), el resultado de la ejecución será diferente debido al cambio de y.
Por lo tanto, la función debe convertirse en una función pura que esté encapsulada y no afectada por factores externos. Los beneficios de una función pura no solo son la independencia, sino también la facilidad de escribir pruebas.
función suma(x, y) { retorno x + y }; suma(1,2);
Función de orden superior
Una función de orden superior se refiere a una función que "acepta o devuelve una función".
La llamada aceptación se refiere a ingresar una función como argumento (Argumento).
La función de devolución de llamada devuelve una función como un valor de variable. Hay varios tipos diferentes de funciones de orden superior, como mapear y reducir.
La introducción anterior orientada a funciones es un ejemplo, repasémoslo.
// Función de devolución de llamada, pasada como parámetro en la función de orden superior function callbackFunction(){ console.log('Soy una función de devolución de llamada' } // función de orden superior function lowerOrderFunction(func){ console.log('I soy una función de orden superior') func() } lowerOrderFunction(callbackFunction);
En el código anterior, lowerOrderFunction() es un HOF porque le pasamos una función de devolución de llamada como parámetro.
El ejemplo anterior es muy simple, ampliémoslo aún más y veamos cómo usar HOF para escribir código más simple y modular.
Cómo funcionan las funciones de orden superior
Suponga que desea escribir una función que calcule el área y el diámetro de un círculo. Como gente nueva en la programación, la primera solución que se nos ocurre es escribir funciones que calculen el área o el diámetro por separado.
const radio = [1, 2, 3] // función para calcular el área del círculo const calcularArea = función (radio) { const salida = [] for(let i = 0; i< radio.longitud; i++; ){ salida.push(Math.PI * radio[i] * radio[i]); } return salida } // función para calcular el diámetro del círculo const calcularDiámetro = función (radio) { const salida = []; (let i = 0; i< radio.longitud; i++){ salida.push(2 * radio[i] } return salida; console.log(calculateArea(radius)); )
¿Pero notaste el problema con el código anterior?
Estamos reescribiendo casi la misma función, pero con una lógica ligeramente diferente. Además, la función que escribimos no se puede reutilizar, así que veamos cómo podemos escribir el mismo código usando funciones de orden superior:
radio constante = [1, 2, 3]; // lógica para calcular el área área constante = función(radio){ return Math.PI * radio * radio } // lógica para calcular el diámetro diámetro constante = función(radio){ return; 2 * radio; } // una función reutilizable para calcular área, diámetro, etc. const calcular = función(radio, lógica){ const salida = []; .push(logic(radio[i])) } return salida; } console.log(calcular(radio, área));
Como puede ver en el código anterior, solo escribimos una función calcular() para calcular el área y el diámetro de un círculo. Simplemente escribimos la lógica y la pasamos a calcular() y la función hará el trabajo.
El código que escribimos usando funciones de alto nivel es conciso y modular. Cada función hace su propio trabajo y no repetiremos nada aquí.
Supongamos que en el futuro queremos escribir un programa para calcular la circunferencia de un círculo. Sólo necesitamos escribir la lógica para calcular pi y pasarla a la función calcular().
circunferencia constante = función(radio){ return 2 * Math.PI * radio } console.log(calcular(radio, circunferencia));
Aquí también se proporcionan contraejemplos y aplicaciones de otras funciones de flecha.
const print = (mensaje) => { console.log(`imprimir función con ${mensaje}`) } const helloMessage = () => { return "Hola Mensaje" } print(helloMessage() // imprimir función con Hola mensaje
Sin embargo, las funciones de orden superior nos permiten manejar situaciones más convenientes y complejas.
const printNameByCondition = (condición, trueFunc, falseFunc) => { condición? trueFunc() : falseFunc() } const printHogan = () => console.log("Hola Hogan"); log("Hola BoBo"); printNameByCondition(true, printHogan, printBobo); // Hola Hogan printNameByCondition(false, printHogan, printBobo);
Como puede ver aquí, creé una función con tres argumentos (Argumentos), los dos últimos son funciones.
Haga un juicio a través de la primera cita. Si es verdadero, ejecute la primera función; de lo contrario, ejecute la segunda función.
Cómo utilizar funciones de orden superior
Podemos utilizar muchas formas de realizar funciones de orden superior. Al procesar matrices, podemos utilizar las funciones map(), reduce(), filter() y sort() para procesar y transformar los datos de la matriz.
Las funciones de orden superior manejan objetos.
Puede crear un nuevo objeto a partir de un objeto utilizando la función Object.entries().
Funciones de orden superior utilizan funciones
Puede utilizar la función compose() para crear funciones complejas a partir de funciones más simples.
Cómo utilizar algunas funciones importantes de orden superior
Hay muchas funciones de alto nivel integradas en JavaScript, las más comunes son map(), filter() y reduce(). Echemos un vistazo más de cerca a continuación.
Cómo usar map() en JavaScript
La función map() recibe una matriz y convierte cada valor de la matriz sin cambiar la matriz original. Normalmente se utiliza para convertir una matriz numérica en una nueva matriz con una estructura diferente.
ejemplo 1: Supongamos que queremos agregar a cada elemento de la matriz 10. nosotros podemos usar mapa() El método refleja cada elemento de la matriz, agregándolo a 10.
const arr = [1, 2, 3, 4, 5]; const salida = arr.map((num) => num += 10) console.log(arr); 5] consola.log(salida); // [11, 12, 13, 14, 15]
En el ejemplo anterior, arr es una matriz de cinco elementos:
Usamos el método map para aplicar una función a cada elemento de la matriz y devolver una nueva matriz que contiene los elementos modificados.
La función de devolución de llamada pasada al mapa utiliza la función de flecha y recibe un parámetro numérico.
Esta función suma 10 a num (cada elemento de la matriz) y devuelve el resultado.
Ejemplo 2: aquí hay una variedad de usuarios. Digamos que solo queremos el nombre del usuario,Simplemente usamos el método map() para extraer de la matriz de usuarios.
usuarios const = [{nombre: 'John', apellido: 'Doe', edad: 25}, {nombre: 'Jane', apellido: 'Doe', edad: 30}, {nombre: 'Jack', apellido: ' Doe', edad: 35}, {primer nombre: 'Jill', apellido: 'Doe', edad: 40}, {primer nombre: 'Joe', apellido: 'Doe', edad: 45}, ] resultado constante = usuarios. map((usuario) => usuario.nombre + ' ' + usuario.apellido) console.log(resultado); // ['John Doe', 'Jane Doe', 'Jack Doe', 'Jill Doe', 'Joe Gama']
En el código anterior, usuarios es una matriz de objetos que representan a los usuarios. Cada objeto tiene tres atributos: apellido, nombre y edad.
Usamos el método map() para asignar a cada usuario y obtener los atributos nombre y apellido.
La función de devolución de llamada recibe un parámetro de usuario, que representa un elemento en la matriz de usuarios (un objeto).
Esta función concatena las propiedades de nombre y apellido del usuario y devuelve el resultado.
Cómo utilizar el filtro() en JavaScript
La función filter() toma una matriz y devuelve una nueva matriz que contiene solo valores que cumplen ciertos criterios.
Tampoco altera la matriz original y, a menudo, se utiliza para seleccionar conjuntos de datos de una matriz según criterios específicos.
Ejemplo 1: utilice la función filter() para devolver números de una matriz numérica.
const arr = [1, 2, 3, 4, 5]; const salida = arr.filter((num) => num % 2) // filtrar números impares console.log(arr); , 3, 4, 5] console.log(salida); // [1, 3, 5]
En el código anterior, arr es una matriz que contiene cinco elementos:
filter es un método que crea una nueva matriz cuyos elementos deben pasar la prueba especificada en la función de devolución de llamada proporcionada.
Esta función de devolución de llamada verifica si num es un número impar verificando si num es divisible por 2 (num % 2). Si num no es divisible por 2, la función devuelve verdadero; de lo contrario, devuelve falso.
Cuando se usa el filtro en arr, la función se aplica a cada elemento de la matriz, creando una nueva matriz que contiene solo elementos que devuelven verdadero o pasan la condición especificada. La secuencia original permanece sin cambios y se devuelve el resultado.
Ejemplo 2: puede usar filter() para devolver solo usuarios mayores de 30 años en la matriz.
usuarios const = [{nombre: 'John', apellido: 'Doe', edad: 25}, {nombre: 'Jane', apellido: 'Doe', edad: 30}, {nombre: 'Jack', apellido: ' Doe', edad: 35}, {primer nombre: 'Jill', apellido: 'Doe', edad: 40}, {primer nombre: 'Joe', apellido: 'Doe', edad: 45}, ] // Encuentra los usuarios con edad mayor a 30 const salida = usuarios.filter(({age}) => edad > 30) console.log(output); // [{firstName: 'Jack', lastName: 'Doe', age: 35} , {nombre: 'Jill', apellido: 'Doe', edad: 40}, {nombre: 'Joe', apellido: 'Doe', edad: 45}]
En el código anterior, usuarios es una matriz que representa a los usuarios. Cada objeto tiene tres atributos: nombre, apellido y edad.
Utilice un filtro en la matriz de usuarios y utilice una función de devolución de llamada para cada elemento de la matriz.
La función recibe un argumento, es decir, un objeto que se reestructura en una única propiedad.
Esta función comprueba si la edad es superior a 30 años. Si es así, la función devuelve verdadero, en caso contrariodevolver FALSO.
Cuando usa el filtro en los usuarios, aplica esta función a cada elemento de la matriz, creando una nueva matriz que contiene solo los valores pasados a la función.devolver elemento verdadero, ydevolverresultado. La matriz de usuarios original permanece sin cambios.
Cómo usar reducir() en JavaScript
En la mente de muchas personas, reduce() es una función relativamente compleja. Si se ha encontrado con el método reduce() antes pero no puede entenderlo al principio, ¡continúe leyendo!
Quizás tengamos una pregunta: ¿Por qué usar reduce()? Dado que ya existen muchas funciones útiles, ¿cómo decidimos cuál usar y cuándo?
En lo que respecta a reduce(), debes usarlo cuando quieras realizar alguna operación en los elementos de la matriz y devolver un valor único.
Valor único: se refiere al resultado acumulativo de aplicar repetidamente una función a los elementos de la matriz.
Por ejemplo, puede usar reduce() para encontrar la suma de todos los elementos en una secuencia, encontrar el valor máximo o mínimo, combinar varios objetos en un solo objeto o dividir diferentes elementos en una secuencia. Entendamos esto a través de ejemplos.
Ejemplo 1: use reduce() para encontrar la suma de todos los elementos en una matriz:
números constantes = [1, 2, 3, 4, 5]; suma constante = números.reduce((total, valoractual) => {retorno total + valoractual; }, 0) console.log(suma);
En este ejemplo, el método reduce() se utiliza en la matriz y se pasa a través de una función de devolución de llamada que toma dos parámetros: total y currentValue.
El parámetro total es la acumulación de valores devueltos cuando se usa la función, y currentValue es el elemento actual que se procesa en la matriz.
El segundo parámetro de reduce() también es el valor inicial, que es 0 en el ejemplo anterior y se utiliza como valor inicial de total en la primera iteración.
En cada iteración, la función suma el valor actual al total ydevolverEl nuevo valor del total.
A continuación, el método reduce() utiliza el valor devuelto como el número total para la siguiente iteración hasta que se hayan procesado todos los elementos de la matriz.
Finalmente, devuelve el valor final del total, que es la suma de todos los elementos de la matriz.
Ejemplo 2: utilice reduce() para encontrar el valor máximo en una secuencia:
let números = [5, 20, 100, 60, 1]; const maxValue = números.reduce((max, curr) => { if(curr > max) max = curr; return max; }); valormax); // 100
En este ejemplo, usamos nuevamente los dos parámetros max y curr en la función de devolución de llamada, esta vez no pasamos el segundo parámetro en el método reduce(). Por lo tanto, el valor predeterminado será el primer elemento de la matriz.
La función de devolución de llamada primero verifica si el elemento actual curr es mayor que el valor máximo actual max. Si es así, actualiza el valor de max para convertirlo en el elemento actual. Si no, max no se actualiza. Finalmente, la función devuelve el valor de max.
En este ejemplo, el método reduce() primero establece max en 5 y curr en 20. Luego verifica si 20 es mayor que 5, lo cual es, por lo que actualiza el máximo a 20.
Luego establezca curr en 100 y verifique si 100 es mayor que 20. El resultado es mayor que 20, por lo que max se actualiza a 100.
Este proceso continúa hasta que se hayan procesado todos los elementos de la matriz. El valor final de max será el valor más grande de la secuencia, que es 100 en este ejemplo.
Ventajas de las funciones de orden superior
El uso de funciones de orden superior tiene algunos beneficios importantes para los desarrolladores.
En primer lugar, las funciones de orden superior pueden hacer que el código sea más conciso y comprensible, ayudar a mejorar la legibilidad del código, ayudar a acelerar el proceso de desarrollo y hacer que el código sea más fácil de usar.
En segundo lugar, las funciones de orden superior pueden ayudar a agrupar el código del programa para que sea más fácil de mantener y ampliar.
Zurra
Entre las funciones de orden superior, el curry es una técnica especial e importante.
Los argumentos en diferentes niveles en una función de orden superior se pueden pasar por separado. También puede utilizar este concepto para agregar un prefijo a una función de orden superior.
const userLogs = nombre de usuario => mensaje => console.log(`${nombre de usuario} -> ${mensaje}`) const log1 = userLogs("Hogan"); log1("Hola mundo"); ; const log2 = userLogs("Bobo"); log2("Hola mundo");
Aquí también usamos un ejemplo para implementar, que también proporciona dos prefijos diferentes para funciones de orden superior.
Conclusión
Este artículo analiza el concepto de orientación de funciones, qué es una función de orden superior, los beneficios de usar funciones de orden superior y cómo usar funciones de orden superior en aplicaciones prácticas. También utiliza un espacio relativamente pequeño para presentar qué es Curring. Estas funciones también se introducen para funciones puras.
Al utilizar funciones de orden superior, los desarrolladores pueden escribir programas de manera más inteligente y modularizar el código, haciéndolo más claro y fácil de usar.
Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!
Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~
Cita
React Vernacular Movement 05-Función de orden superior (Función de orden superior)
Otras referencias de artículos
JavaScript Async Await - Reaccionar movimiento vernáculo 03
Objeto JavaScript ES6 - Reaccionar movimiento vernáculo 02
Español 
繁體中文 
English 
简体中文 
한국어 
日本語