Header Ads Widget

Ticker

6/recent/ticker-posts

Funciones de orden superior en JavaScript

javascript funciones de orden superior

Sin falta, deberá iterar o recorrer los datos en sus programas sin importar el idioma. En JavaScript tenemos varias construcciones de bucle para hacer esto, así como las llamadas funciones de orden superior. Estas funciones de orden superior permiten una sintaxis más concisa para permitirle iterar sobre una colección mientras aplica la lógica de su elección a cada elemento de la colección si lo desea. A veces son un poco complicados, por eso practicaremos un montón de ellos en este tutorial. Analizaremos for, forEach, for of, in in, filter, map, sort y reduce.


Necesitamos algunos datos

Podemos practicar en un conjunto simple de datos. Aquí hay una matriz de objetos y una matriz de números que usaremos para practicar.

También usaremos esta función de contenedor para que podamos ver los resultados directamente en la ventana del navegador en lugar de tener que abrir manualmente la consola.


para

¡Okay! Ahora comencemos con algunos bucles básicos para que podamos ver cómo las cosas funcionarán un poco diferente una vez que lleguemos a las funciones de orden superior. Primero está el forbucle básico Queremos simplemente recorrer todas las empresas y mostrar su nombre.

javascript para loop


para cada

Para hacer lo mismo con forEach, podemos usar este estilo de código.

javascript para cada bucle


para de

El for ofbucle se vería así.


para en

Con el for inbucle podemos iterar sobre todos los pares de valores clave de un objeto. Con este código, iteramos sobre las propiedades del cuarto objeto en la matriz de nuestras empresas.

JavaScript para en bucle


filtrar

La función de filtro es la primera función de orden superior que podemos ver. Si escribe el código React , ¡usará filter todo el tiempo! Esta función se utiliza para acceder a un subconjunto de una matriz en función de una condición. Digamos que solo queríamos los números en nuestra matriz de números que fueran menores o iguales a 20. Antes del filtro, tendríamos que usar un bucle for como este.

comportamiento del filtro javascript usando para

Usando la filterfunción, podemos lograr el mismo resultado como este.

ejemplo de filtro javascript

Para simplificar esto aún más, ¡podría usar este sencillo revestimiento!

ejemplo de filtro javascript

Ahora trabajemos con la matriz de objetos de las compañías junto con la función de filtro. Supongamos que queremos generar solo las empresas del sector financiero. ¡No hay problema!

filtro de JavaScript en una matriz de objetos

Podemos utilizar la función de filtro para encontrar las empresas que se fundaron durante la década de 1970 de esta manera.

Y parece que Apple y Microsoft se fundaron en los años setenta.
Ejemplo de función de filtro js

Tenga en cuenta que el nombre que le damos al parámetro para las funciones de flecha puede ser lo que queramos. La mayoría de las veces usará una convención de nomenclatura que tenga sentido para usted, pero como ejemplo, el siguiente código produce los mismos resultados exactos.

Esto siempre me confundió un poco, así que espero que ese pequeño consejo lo aclare para usted (¡y para mí!).

Aquí hay otro ejemplo de la función de filtro donde encontramos empresas que han estado en el negocio durante 40 años o más. Todo lo que se necesita es un simple revestimiento. (La segunda línea de código es solo para mostrar el resultado en el navegador).

disney ford apple visa microsoft

Como mencionamos anteriormente, usará la función de filtro con React , por lo que es una buena práctica.


mapa

Ahora podemos pasar a la mapfunción. Entonces, ¿qué hace la función de mapa para nosotros? La función de mapa se usa para crear una nueva matriz que contiene los resultados de llamar a una función dada en cada elemento de la matriz original. Entonces toma una matriz, llama a una función en cada elemento, que llena una nueva matriz. Veamos algunos ejemplos de cómo usar la función de mapa.

Podríamos extraer los nombres de cada compañía, por ejemplo, y ponerlos en una nueva matriz.

Ejemplo de función de mapa de JavaScript

Podemos usar map para ejecutar una función que coloca una descripción de la compañía en una nueva matriz y luego generarla.

Ejemplo de función de mapa js

¿Qué tal un ejemplo de uso del mapa para iterar sobre todos los números en nuestra matriz de números? Este ejemplo tomará cada número en la matriz y lo establecerá a la potencia de 2. El resultado se almacena en una nueva matriz y luego enviamos el resultado al navegador.

javascript poder de mapa de 2

Estos son algunos ejemplos del uso de la función de mapa. Para crear una lista en React , puede usar la función de mapa.


ordenar

Otra función de orden superior que podemos ver es la función de clasificación. El primer ejemplo mostrará cómo clasificar las empresas de las más antiguas a las más nuevas.

función de ordenación de JavaScript en acción

Puede lograr el mismo resultado con este código mucho más conciso que usa el operador ternario como tal.

¿Qué hay de ordenar la matriz de números de menor a mayor? Eso se puede hacer con este fragmento.

;
js sort int bajo a alto


reducir

La reducefunción es interesante y toma una matriz con muchos valores y la reduce a un valor de salida. Ves este mucho para sumar todos los valores en una matriz y luego generar ese valor. Siempre pensé que era extraño usar una función de reducción para agregar, pero, por desgracia, así es.

Por ejemplo:

js reduce la función de orden superior

Podría usar esta solución más elegante para obtener el mismo resultado.

Ahora practiquemos el uso de reducir en la matriz de objetos de la compañía. Esto funciona un poco diferente, pero el concepto es el mismo. Sumemos el número total de años que las empresas han estado colectivamente en el negocio.

Ejemplo de función js reduce

La versión concisa funciona igual de bien.

Un aspecto interesante de las funciones de orden superior es que puede encadenarlas para realizar varias operaciones de una sola vez. En el ejemplo aquí, tomaremos nuestros números y multiplicaremos cada uno por tres, luego miraremos solo aquellos con un valor mayor o igual a 70, y finalmente los ordenaremos de menor a mayor.

javascript encadenamiento de orden superior


Funciones de orden superior en resumen de JavaScript

En este tutorial aprendimos sobre algunas de las funciones de orden superior disponibles en JavaScript, como filter (), map (), sort () y reduce (). Al usar estas funciones de orden superior, puede disminuir la cantidad de forbucles que tiene que escribir y crear un código más conciso y elegante. Además, este tipo de funciones a menudo son necesarias para transformar o filtrar datos en marcos populares como Vue, React y Angular, por lo que son una buena habilidad para tener en su caja de herramientas.

Publicar un comentario

0 Comentarios