Operaciones de matriz simples con JavaScript

Hola, les saluda Luis y esta vez les traigo otro post.

Simplifique el trabajo con colecciones en JavaScript mediante el uso de funciones de ayuda de matrices nativas

JavaScript proporciona muchas funciones auxiliares de matriz que pueden manejar la mayor parte del trabajo pesado cuando se trata de operaciones de matriz.

En este artículo, analizaré ejemplos de algunas de esas operaciones para demostrar cómo pueden ayudar a simplificar la forma de escribir código.

Las funciones voy a discutir en este artículo incluyen .map(), .filter(), .reduce(), .some(), y .find().

He estado usando estas poderosas funciones durante varios años y tengo problemas para recordar la última vez que escribí un bucle for estándar para trabajar con una matriz. Una vez que aprendas a usarlos, nunca volverás.

Para cada uno de estos, usaré ejemplos para demostrar cómo esto puede simplificar el código en comparación con los métodos más tradicionales. ¡Vamos a sumergirnos!

.map () y .filter ()

Empezaremos presentando .map() and .filter() a través de ejemplos. Realmente comencé a usarlos mucho cuando comencé a trabajar en mi primera aplicación React con Redux.

Estas funciones de matriz son útiles porque siempre devuelven una referencia a una nueva matriz en el caso de .map() y .filter(). Esto simplifica la detección de cambios en su aplicación.

Entonces, por ejemplo, si tiene una referencia de matriz como dependencia para un gancho en una aplicación React, es fácil detectar cuándo volver a ejecutar ese gancho porque solo lo está activando cuando la referencia a la matriz cambia a una nueva matriz en lugar de que intentar detectar adiciones, eliminaciones, etc.

Antes de comenzar a ver ejemplos, crearemos una matriz con un puñado de objetos para que tengamos una colección con la que trabajar.

Comencemos por realizar una operación simple

Digamos, por ejemplo, que queremos obtener todos los identificadores en una matriz. Así es como se vería usando un lazo for.

Creamos una matriz y luego recorremos los valores y enviamos todos los identificadores a esa matriz para obtener la lista de identificadores. Podemos simplificar esta operación usando .map()

Esto nos da el mismo resultado que antes, pero en lugar de crear una variable y luego asignar los valores, podemos hacerlo todo en un solo paso.

Podemos simplificar esto aún más. Podemos usar un retorno implícito en la función de flecha que escribimos.

Ese es el concepto básico con .map() . Se utiliza para crear una matriz con un resultado por elemento de la colección original.

Para nuestro próximo ejemplo, trabajaremos con .filter() que difiere de .map() en eso, devolverá una nueva matriz pero no tendrá una entrada para cada elemento de la colección original a menos que todos los elementos de esa matriz cumplan la condición para .filter().

Digamos que queremos obtener una lista de todos los que se han conectado y se han conectado más de 50 veces. Primero, lo haremos con un lazo for.

Muy similar a lo que hicimos antes. Creamos una nueva matriz para contener los resultados y luego recorre la colección para agregar los resultados que cumplen con las condiciones a esa nueva matriz.

Al igual que antes, mostremos cómo podemos combinar esos dos pasos en un solo paso con .filter().

Utilizando .filter() y .map() en combinación puede hacerlos aún más útiles. Dado que la devolución de cada uno es una nueva matriz, es muy sencillo encadenarlos si necesita aplicar varias operaciones a la vez.

Por ejemplo, podemos combinar nuestro primer ejemplo con nuestro segundo ejemplo para obtener la identificación de cada usuario que está activo y ha iniciado sesión más de 50 veces.

Puede ver lo útil que es esto ya que filtramos la lista solo a los objetos que nos interesan antes de asignar cada uno a la identificación.

.reduce()

Puedo recordar una entrevista que tuve hace varios años en la que el entrevistador me pidió que le explicara cómo usarlo .reduce().

En ese momento, no tenía ni idea, pero el entrevistador me contó con entusiasmo. Dijo y cito  «Reducir es el gran mack daddy de todas las operaciones de matriz» . Y ahora que estoy familiarizado, definitivamente puedo estar de acuerdo con ese sentimiento.

Con .reduce () puede transformar una colección en un solo objeto. Entonces, digamos, por ejemplo, que queremos crear un objeto con una clave para cada identificación de usuario para poder usarlo para buscar fácilmente un usuario.

Echemos un vistazo a un ejemplo.

En el ejemplo anterior acces el objeto acumulador. Inicializamos el acumulador con, {}para empezar, es solo un objeto vacío.

En cada iteración, a través de la colección, usamos el operador de propagación ( …acc) para "extender" todas las claves / valores que ya están en el acumulador y luego agregamos la identificación actual como clave y el objeto de usuario actual como valor.

.some() y .find()

Los últimos ejemplos que repasaremos incluirán .some()y .find(). Me encuentro usando estas dos operaciones juntas con bastante frecuencia si necesito encontrar un solo valor en una matriz.

Podemos usar .some() para averiguar si alguno de los objetos de una matriz cumple nuestra condición. Digamos que queremos ver si tenemos usuarios activos dentro de la lista.

Esto devuelve un booleano que indica si al menos un objeto se ajusta a nuestros criterios. .find() es muy similar.

La única diferencia es que .find () encontrará el primer objeto que cumpla con nuestra condición y luego devolverá ese objeto.

Siempre estoy buscando mejores formas de escribir JavaScript, por lo que si no está familiarizado con las operaciones de matriz incluidas en este artículo, espero que esto le haya ayudado a aclarar su comprensión.

Espero que te haya sido de utilidad. Gracias por leer este post.