Introducción a las funciones de orden superior en JavaScript

Por definición, una función de orden superior es una función que, al menos, recibe una o más otras funciones como argumentos o devuelve otra función como resultado. En este tutorial nos centraremos en las funciones estándar de la biblioteca como filtro, mapear y reducir: veremos cuándo pueden ser útiles y cómo usarlas.

En este tutorial aprenderás:

• ¿Qué es una función de orden superior?.
• Por qué podemos usar funciones de orden superior en JavaScript.
• Cómo y cuándo usar filtrar, mapear y reducir las funciones.

¿Qué es una función de orden superior? ?

En JavaScript, las funciones están Objetos de primera clase: Pueden asignarse a variables, aprobados como argumentos a otras funciones, o ser devueltos por otras funciones. El uso de funciones de orden superior se basa en estas peculiaridades. Definimos una función de orden superior como una función que al menos acepta otras funciones como argumentos, o devuelve otra función como su resultado. En este tutorial nos centraremos en las funciones estándar de la biblioteca como filtrar, mapa y reducir.

En este tutorial, haremos un uso de Funciones de flecha: Si desea saber más sobre esta nueva sintaxis de funciones, puede consultar este tutorial que publicamos sobre el tema.

Filtro o formación.prototipo.filtrar

La primera función de la que hablaremos es filtrar, o, para usar su nombre completo, formación.prototipo.filtrar. Esta función es en realidad un método del formación objeto, y lo que hace es muy simple: devuelve una nueva matriz compuesta por los elementos de la matriz original que pasan la prueba implementada en su cuerpo.

Para ser claro, veamos un ejemplo. Supongamos que tenemos una variedad de palabras y queremos "filtrar" palabras compuestas por exactamente tres letras. Podríamos obtener lo que queremos usando un para bucle, escritura:

const palabras = ["casa", "pluma", "libro", "computadora", "auto"]; Const cortas Palabras = []; // Podríamos usar un estilo C estándar para el bucle ... para (deje que i = 0; i < words.length; i++)  if (words[i].length == 3)  shortWords.push(words[i])   //… or a for… of loop for (let word of words)  if (word.length == 3)  shortWords.push(word);   

Ambos ejemplos anteriores, y con ambos logramos el mismo resultado. Después de ejecutar el código, la matriz de "Palabras cortas" tendrá dos miembros: "Pen" y "auto". Sin embargo, puede notar que especialmente el primer ejemplo es bastante detallado. Veamos cómo podemos lograr el mismo resultado con menos código, utilizando filtrar:

Const Palabras cortas = palabras.filtro ((elemento) => elemento.longitud == 3);

Obtuvimos exactamente el mismo resultado. Sin embargo, hay una diferencia: esta vez, al usar también un flecha función, escribimos todo en una sola línea de código!. Aquí es cómo filtrar Funciona: acepta solo un argumento "obligatorio" que es otra función, una devolución de llamada.

Esta devolución de llamada, acepta, a su vez, un argumento que es el elemento de la matriz original que se está procesando actualmente. Si el elemento pasa la prueba (en este caso si la longitud de la cadena es igual a 3), el elemento se inserta en la nueva matriz.

Mapa o formación.prototipo.mapa

El mapa (formación.prototipo.mapa) método, hace algo diferente. También acepta una función de devolución de llamada como su único argumento obligatorio, pero devuelve una nueva matriz compuesta por los elementos resultantes de aplicar dicha devolución de llamada a todos los elementos de la matriz original.

Un ejemplo aclarará todo. Esta vez, supongamos que queremos obtener una matriz que debe contener todas las cuerdas dentro de la matriz de "palabras", pero en forma superior. En una sola línea, podríamos escribir:

const uppercasedwords = palabras.map ((elemento) => elemento.toupperCase ());

Después de ejecutar el código anterior, la matriz "uppercaseWords" será:

['Casa', 'pluma', 'libro', 'computadora', 'auto']

La devolución de llamada aceptada como argumento por mapa, tiene solo un argumento obligatorio, que es el elemento de la matriz original que se está procesando. Se devuelve el valor resultante de aplicar la devolución de llamada a cada elemento de la matriz original (recuerde: las funciones de flecha sin aparatos ortopédicos de rizado usan retorno implícito) y se agregó a la nueva matriz. El resultado, en este caso, es una nueva matriz compuesta por la versión superior de todos los elementos en el original.

Reducir o formación.prototipo.reducir

El reducir, o formación.prototipo.reducir El método funciona de una manera diferente: acepta una devolución de llamada que toma dos argumentos obligatorios. El primero es el llamado acumulador, y el segundo es el valor actual. En lugar de producir una nueva matriz, esta función de orden superior utiliza la devolución de llamada proporcionada, también llamada reductor, a reducir la matriz a un solo valor, que se devuelve. En realidad es más simple de lo que parece, veamos un ejemplo básico.

Supongamos que tenemos una matriz que contiene algunos números:

Const números = [15, 0.50, 200];

Ahora, imagine que queremos obtener la suma de todos los números contenidos en la matriz. Nuevamente, podríamos usar un bucle o, como queremos demostrar, reducir, de la siguiente manera:

Deje que TotalPrice = números.reducir ((acumulador, currentValue) => acumulador + currentValue);

El reducir El método, como se dijo anteriormente, acepta una función de devolución de llamada que toma dos argumentos obligatorios. El primero es el acumulador: Este argumento acumulará los resultados producidos cada vez que se llama a la función de devolución de llamada. El segundo es valor actual, que representa el elemento actual de la matriz original que se está procesando.

Una cosa importante a tener en cuenta es que, si no se especifica lo contrario (veremos en un momento cómo podemos hacerlo), la primera vez que se llama la función de devolución de llamada, el valor del acumulador será el primer elemento de la matriz. Podemos darnos cuenta de que simplemente registrando el valor del acumulador y de la valor actual, Cada vez que se ejecuta la devolución de llamada:

Deje que TotalPrice = números.reducir ((acumulador, currentValue) => consola.log (acumulador, actualValue); acumulador de retorno + currentValue; ); 

La salida del código anterior será:

15 0.5 15.5 200 

Como puede notar, si un valor inicial para el acumulador no se proporciona explícitamente, se usa el primer elemento de la matriz (15) y, muy importante, la índice del primer elemento procesado por la matriz, es1, Entonces, en este caso, el primer elemento que se procesará es 0.5 (el segundo).

Si lo piensa, esto tiene sentido: de lo contrario, el primer elemento de la matriz se contaría dos veces! (Puede valer la pena notar que podríamos haber especificado manualmente el índice del primer elemento de la matriz a procesar, utilizando el CurrentIndex argumento opcional de la devolución de llamada, proporcionándola después valor actual). Como se esperaba, el valor final de precio total será 215.5:

TotalPrice 215.5 

En el ejemplo anterior, los elementos de la matriz original, "números", eran números simples, así que tipos principales en JavaScript. ¿Y si fueran objetos?? Supongamos que tenemos una variedad de objetos, cada uno con tres propiedades: un nombre, un precio y una moneda de precio:

const elementos = [nombre: 'Libro', precio: 15, moneda: 'eur', nombre: 'car', precio: 15000, moneda: 'eur', nombre: 'laptop', precio: 1200 , moneda: 'eur']; 

Lo que queremos obtener aquí es la suma de todos los precios de los artículos. Un problema surge inmediatamente: no queremos sumar cada elemento de la matriz directamente, ya que en este caso estamos trabajando con objetos, sino el precio propiedad de cada uno. Por lo tanto, debemos utilizar un parámetro opcional aceptado por reducir, cual es valor inicial:

Deja que FinalPrice = elementos.reducir ((acumulador, currentValue) => acumulador + currentValue.precio, 0)

El precio final obtenemos, como se esperaba, es 16215. Si no hubiéramos especificado el valor inicial, Proporcionándola después de la función de devolución de llamada (0), el primer elemento de la matriz de "elementos" se habría utilizado como valor inicial para el acumulador. Dado que este es un objeto, el resultado no habría sido como se esperaba!

Conclusiones

En este tutorial aprendimos a saber qué define una función de orden superior y por qué es posible usarlos en JavaScript. También aprendimos a conocer y usar tres funciones de orden superior contenidas en la biblioteca estándar de JavaScript, como filtrar, mapa y reducir. Si está interesado en otros temas de JavaScript, puede consultar nuestros tutoriales sobre promesas o funciones de flecha.

Tutoriales de Linux relacionados:

• Una introducción a la automatización, herramientas y técnicas de Linux
• Mastering Bash Script Loops
• Cosas para instalar en Ubuntu 20.04
• Mint 20: Mejor que Ubuntu y Microsoft Windows?
• Cosas que hacer después de instalar Ubuntu 20.04 fossa focal Linux
• Bucles anidados en guiones Bash
• ¿Con qué frecuencia tiene que reiniciar su servidor de Linux??
• Tutorial de depuración de GDB para principiantes
• Manejo de la entrada del usuario en scripts bash
• Cómo arrancar dual Kali Linux y Windows 10