9gustin

Arrays en Javascript 📚 | cap. 2

Buenas! te dejo mi anterior post acerca de los arrays: Arrays en Javascript 📚 | cap. 1

En este caso vamos a continuar con el ejemplo que veníamos sobre un carrito de compras. Así es como esta el objeto actualmente: buyOrder. Además, tenemos este listado de productos en stock extendido: inStockProducts

Buscando en un array

Frecuentemente necesitamos buscar en un array, ya sea para filtrar un listado de elementos que cumplan un cierto criterio, para esto usaremos el filter. También es posible encontrar un objeto único con el método find. Y por ultimo vamos a ver el método findIndex, que sirve para obtener el índice de un elemento dentro del array.

Las 3 funciones reciben como parámetro una función que se ejecutara con cada uno de los ítems del array. El valor de retorno de esta función se comparara como booleano y solo serán retornados los elementos que cumplan con este parámetro.

  • Ejemplos

    Primero vamos con el find, vamos a hacer una función que nos permita buscar un elemento particular dentro de un array. El valor de retorno del método find es un elemento único(que se encontró en el array) o undefined en caso de no encontrar una coincidencia.

    findByProductByName

    En este ejemplo la función findByProductByName se encarga de buscar un producto en una lista de productos uno que coincida por el nombre.

    Ahora vamos con el filter, lo que vamos a hacer es armar la lista de productos a reponer. Ya que estamos llevando productos el vendedor necesitara reponer productos que tengan poco stock. Vamos a hacer una lista de productos a reponer teniendo en cuenta los productos que después de esta compra queden con un stock debajo de 3.

    Para buscar el producto del carrito en la lista de productos en stock vamos a usar la funcion findByProductByName que creamos previamente.

    filterProducts

    Esto nos retornara los elementos del carrito que hay que reponer, pero con la cantidad que se esta llevando en el carrito. No con la cantidad que tenemos que reponer, para eso podríamos transformar los elementos con un map. No va con lo que estamos viendo, pero si queres ver como lo resolví podes verlo aca ;)

    Los métodos find y filter nos devuelven los resultados de las búsquedas, pero si modificamos esos resultados no se modifican sobre la lista original, para modificar un elemento de la lista original necesitamos el índice donde esta ubicado, para esto vamos a usar el método findIndex. El método findIndex retorna un valor numérico.

    Vamos a actualizar la lista de productos en stock después de la compra que se realizo. Para esto tendremos en cuenta que se compraron 2 Naranjas y 1 Mango.

    update stock

Ordenar un array

Podemos manipular los arrays de muchas maneras, una de esas es ordenarlos. Para esto utilizamos el método sort. Este método no modifica la lista original, sino que retorna la lista modificada. Por defecto, si solo ejecutamos la función sin parámetros va a ordenar la lista basándose en la codificación Unicode. Por ejemplo, a un array de strings lo ordenaría alfabéticamente.

Ahora, cuando queremos personalizar la función de ordenamiento, para por ejemplo trabajar con arrays de objetos y ordenar en una propiedad especifica debemos pasar un parámetro de callback a la función sort. Esta función parámetro ira tomando de a dos elementos e ira comparándolos y posicionándolos. El valor de retorno de esta función debe ser numérico.

El método sort ejecuta el callback con los valores del array de izquierda a derecha, pero el parámetro A es el elemento de la derecha dentro de los dos ítems a comparar(y el B es el parámetro de la izquierda)

Por ejemplo:

[12, 1, 1233, 21].sort((paramA, paramB) => paramA - paramB);

Esta línea de código va a ordenar el array numérico ascendentemente y la primera vez que se ejecute va a ser con los siguientes valores:

paramA = 1

paramB = 12

El método sort toma el valor numérico que se retorna y hace lo siguiente:

  • En caso de que sea cero, quiere decir que los valores comparados son iguales, por lo tanto no importa el orden
  • Si el valor es menor de cero, quiere decir que el parámetro A que estamos comparando es mas grande que el parámetro B
  • Si el valor es mayor de cero significa que el parámetro A es menor que el parámetro B
  • Ejemplos

    Vamos a utilizar como ejemplo la variable inStockProducts. Primero vamos a ordenar en base a la cantidad de productos en stock, ascendente y descendentemente.

    función para ordenar numeros

    Y para ordenar strings es un poco distinto, ya que el valor de retorno debe ser numérico, por lo tanto se toma el -1, 0 y 1 como valores de retorno. Además debemos comparar los strings en minúsculas (o mayúsculas) ya que sino priorizara las mayúsculas antes que las minúsculas.

    función para ordenar strings

Quitar elementos de un array

Algo que necesitamos a veces también es quitar elementos de un array, para esto no hay una única manera. No existe un método remove() que quite todos los elementos según un criterio. Lo que podemos hacer es utilizar el método filter, aplicar nuestro filtro ahí y generar la nueva lista sin los elementos que necesitábamos quitar.

Otra cosa que se puede hacer es cortar un array, por ejemplo, si tenemos un limite de elementos de un array podemos utilizar el método slice. este método es para cortar un array y retorna la parte que queremos de este array. slice recibe dos parámetros, el indice desde y el indice hasta.

Por ejemplo, tenemos una lista de números, pero solo podemos tomar los primeros 5, para eso haríamos esto

const randomNumbers = [12, 1, 1233, 21, 33, 31, 123, 121, 122, 124];

const first10 = randomNumbers.slice(0, 5);

// first10 es igual a [12, 1, 1233, 21, 33]

Convertir un array a un elemento

Esto no es algo muy frecuente, pero el algo que aprendí recientemente y me parece interesante compartirlo.

Para este ejemplo pensé en un array de propiedades, para construir un objeto final pero que este sea dinámico. Es decir, nosotros recibimos un array con las propiedades que un objeto tiene y su correspondiente valor.

armando un objeto dinamico

Entonces, después de hacer esto el objeto me quedaría con el valor:

{ name: 'Agustin', lastname: 'Vazquez', age: 22, likeMatecito: true }

Finalizando

Al igual que en el anterior post dejo la referencia de w3schools, que esta todo mas detallado por si queres chusmear 😄

w3schools JavaScript Array Reference

Volver