Arreglos en JavaScript

Índice

  1. El Array
  2. Agregando elementos a un arreglo
  3. Eliminar un elemento del arreglo
  4. Filtrar un arreglo
  5. Cambiando arreglo
  6. Reduciendo el arreglo a un único valor
  7. De string a arreglo
  8. Invirtiendo el orden de un arreglo
  9. Uniendo un arreglo de string en un único string

1. El Array

Un arreglo o array es una lista de variables, donde las variables pueden ser strings, numbers, boleans u objetos.

let personas = ["Andy", "Jhon", "Michael"];

Para poder obtener un elemento del arreglo usamos el índice del elemento.

console.log(personas[2]); // Michael

2. Agregando elementos a un arreglo

Para agregar algún elemento a un arreglo recurrimos al método push de la siguiente forma.

let colores = ["rojo", "azul", "verde", "amarillo"];
colores.push("negro", "blanco");
console.log(colores);
//["rojo", "azul", "verde", "amarillo", "negro", "blanco"]

3. Eliminar un elemento del arreglo

Para eliminar un elemento de un arreglo recurrimos a pop como si de una lista se tratara.

let colores = ["rojo", "azul", "verde", "amarillo", "negro", "blanco"];
colores.pop();
console.log(colores)[("rojo", "azul", "verde", "amarillo", "negro")];

Y si lo que queremos es eliminar un elemento especifico identificado por su índice usamos splice dentro de una función que podemos crear para eliminar un elemento de un arreglo.

function removeItemFromArr(arr, item) {
  var i = arr.indexOf(item);

  if (i !== -1) {
    arr.splice(i, 1);
  }
}

Usamos la condición if ya que si indexOf no encuentra el elemento el valor que tomará i es -1 por lo que si no tenemos el if posiblemente eliminar el último elemento del arreglo.

4. Filtrar un arreglo

Para filtrar un arreglo podemos usar un arrow function.

// lista
let numeros = [20, 55, 78, 44, 12, 11, 9];

// arrow function que filtrará
const esMayor = (num) => num > 30;

// haciendo el filtrado en una nueva variable
let mayor30 = numeros.filter(esMayor);

// mmostrando
console.log(mayor30); // [ 55, 78, 44 ]

Pero si queremos ocupar menos líneas de código podemos enviar el arrow function directamente como parametro.

let numeros = [20, 55, 78, 44, 12, 11, 9];
let mayor30 = numeros.filter((num) => num > 30);
console.log(mayor30); // [ 55, 78, 44 ]

O incluso podemos cambiar el arrow function por una función anónima.

let numeros = [20, 55, 78, 44, 12, 11, 9];
let mayor30 = numeros.filter(function (num) {
  return num > 30;
});
console.log(mayor30); // [ 55, 78, 44 ]

También podemos eliminar elementos de un arreglo usando filter. Esto nos permittirá filtrar un arreglo con una determinada condicion, en este caso la condición es que no sea el mismo id o indice que intentamos eliminar.

let arreglo = [
  { id: 11, nombre: "A" },
  { id: 12, nombre: "B" },
  { id: 22, nombre: "M" },
];

function eliminar(id) {
  const arrayFiltrado = arreglo.filter((item) => item.id !== id);
  arreglo = arrayFiltrado;
}
console.log(arreglo);
eliminar(12);
console.log(arreglo);

5. Cambiando arreglo

Para cambiar cada elemento de un arreglo según cierta lógica usamos la función map.

let numeros = [2, 4, 6, 8];
const por10 = (num) => num * 10;
let numeros10 = numeros.map(por10);
console.log(numeros10); // [20, 40, 60, 80]

También podemos usar este método para modificar los objetos dentro de un arreglo de objetos.

let andy = {
  name: "andy",
  age: 25,
};
let jim = {
  name: "jim",
  age: 35,
};
let personas = [andy, jim];

// Se usa parentesis despues de la flecha
const agregar_apellido = (obj) => ({
  ...obj,
  name: obj.name + " geek",
});

let personas2 = personas.map(agregar_apellido);
console.log(personas2);
// [ { name: 'andy geek', age: 25 }, { name: 'jim geek', age: 35 } ]

Los paréntesis después de la flecha sirven para hacer la distinción de que {...} no pertenecen a la sintaxis de la función flecha si no a un objeto.

6. Reduciendo el arreglo a un único valor

Para esto necesitamos un acumulador. Una función que recibe dos valores un acumulador y el objeto o elemento del cual acumulará.

const acumulaNum = (acum, num) => acum + num;

Para usar este acumulador en nuestra lista usaremos el método reduce.

let lista = [2, 3, 4, 5, 6];

// El método reduce recibe como parametro el acumulador y un número donde comenzará el conteo, en este caso desde el 0
let suma = lista.reduce(acumulaNum, 0);

console.log(suma); // 20

7. De string a arreglo

Existe un método que nos permitirá separar un string y convertirlo en una lista. Este método es split(n), donde n puede ser un string de tal forma que eliminará los substring n que encuentre en el string para separar el string a partir de ellos.

let name = "AndyAndyAndyAndy";
let lista = name.split("nd");
console.log(lista); // [ 'A', 'yA', 'yA', 'yA', 'y' ]

Si usamos n = '' entonces split creara una lista con cada letra del string.

let name = "andy";
let lista = name.split("");
console.log(lista); // [ 'a', 'n', 'd', 'y' ]

8. Invirtiendo el orden de un arreglo

Para invertir el orden de un arreglo usamos el método reverse().

let name = ["a", "n", "d", "y"];
let lstInvertida = name.reverse();
console.log(lstInvertida); // [ 'y', 'd', 'n', 'a' ]

9. Uniendo un arreglo de string en un único string

Para unir un arreglo de caracteres o una lista de strings usamos el método join(n), donde n es el string que unirá los caracteres, este puede tomar el valor de '' para que simplemente una los caracteres.

let lstName = ["a", "n", "d", "y"];
let name = lstName.join("");
console.log(name); // andy

10. Uniendo arreglos usando el operador de propagación

Podemos usar este operador para crear un unico arreglo a partir de dos arrglos distintos.

const arrayUno = ["Chile", "Peru"];
const arrayDos = ["Ecuador", "Colomba"];

const unidos = [...arrayUno, arrayDos];