Manipulando los Arrays en JavaScript - Array Methods

Última actualización: 01 - 11 - 2023

Los arrays son un conjunto de datos dentro de una variable. Estos datos pueden ser de cualquier tipo: cadenas de texto, números, booleanos, funciones, objetos e incluso otros arrays.

¿Cómo crear un array?

Los arrays se caracterizan por tener corchetes cuadrados ( [] ). Se crea una variable que va a contener los datos que necesites y estos datos se encierran dentro de los corchetes.

//Creando un array

let vidasDelAvatar = ["Kyoshi", "Roku", "Aang", "Korra"];

//Segunda forma de crear un array

let vidasDelAvatar = new Array ("Kyoshi", "Roku", "Aang", "Korra");

Aunque la segunda forma de crear un array utilice paréntesis, al momento de imprimir este arreglo por consola se verá representado por corchetes cuadrados. Es más común ver que se creen como en el primer ejemplo.

Los datos dentro del array son llamados índices. 👈 Estos se cuentan a partir de cero.

let unArrayRandom = ["Índice 0", "Índice 1", "Índice 2", "Índice 3", "Índice 4"];

Y como mencioné al principio, los arrays aceptan cualquier tipo de dato.

const muchosDatos = [
  "Una cadena de texto",
  7,
  true,
  10 + 9,
  "Incluso acepta operaciones",
  unaFuncionDentroDeUnArreglo(){},
  unObjeto = {mensaje:"Y objetos"},
  ["Un array dentro de un array"]
];

Accediendo a los índices o elementos de un array

Para acceder a los índices de un array debemos escribir el nombre de la variable junto con el número del índice entre los corchetes.

let vidasDelAvatar = ["Kyoshi", "Roku", "Aang", "Korra"];

vidasDelAvatar[0];
//Si mandamos a imprimir esto el resultado es el nombre de la Avatar Kyoshi⛰
vidasDelAvatar[1];//Roku🔥
vidasDelAvatar[2];//Aang🌪
vidasDelAvatar[3];//Korra🌊

Método length

Aquí puede surgir la siguiente pregunta: ¿Cómo saber cuántos índices tiene un array? Puede que nosotros no hayamos creado ese arreglo y necesitemos saber la cantidad de elementos que pueden haber para manipularlo. Para ello existe el método array.length, donde array hace referencia al nombre de la variable que contiene el arreglo.

El método length nos va a devolver la cantidad de índices que contiene un array.

let vidasDelAvatar = ["Kyoshi", "Roku", "Aang", "Korra"];

vidasDelAvatar.length// Va a imprimir 4 porque el array contiene cuatro elementos

Un detalle cuando estamos manipulando arrays, los índices se manejan como datos numéricos y por ende podemos hacer operaciones con ellos.

Supongamos que no sabemos cuál es el último elemento del array de vidasDelAvatar. Al utilizar el método length este nos devolverá el número 4. Ese número puede ser procesado para que nos devuelva el último ÍNDICE del array.😁

let ultimoAvatar = (vidasDelAvatar.length - 1)
//Ergo
let ultimoAvatar = (4 - 1)// índice 3
//Ergo
let ultimoAvatar = "Korra"

Métodos de los arrays en JavaScript

Los métodos son funciones que nos permiten realizar ciertas operaciones con los arrays. A continuación vamos a ver varios de estos métodos y cómo manejan los índices de un array.

Como dato, cuando se habla de métodos, estos son antecedidos por un punto y son utilizados con variables.😉

Para los próximos ejemplos utilizaremos el siguiente array:

let videoJuegos = [
  "Zelda - Ocarina of Time",
  "Warcraft III",
  "GTA V",
  "Pokemon Go"
];

¿Cómo agregar un elemento o índice al final de un array? Método push

videoJuegos.push("Duel Links");

//Resultado
videoJuegos = [
  "Zelda - Ocarina of Time",
  "Warcraft III",
  "GTA V",
  "Pokemon Go",
  "Duel Links"
];

¿Cómo eliminar un elemento o índice al final de un array? Método pop

videoJuegos.pop();//No hay que pasarle argumentos ya que puede haber casos donde no sepamos cuál es el último índice

//Resultado
videoJuegos = [
  "Zelda - Ocarina of Time",
  "Warcraft III",
  "GTA V",
  "Pokemon Go"
];

¿Cómo agregar un elemento o índice al inicio de un array? Método unshift

videoJuegos.unshift("Duel Links");

//Resultado
videoJuegos = [
  "Duel Links",
  "Zelda - Ocarina of Time",
  "Warcraft III",
  "GTA V",
  "Pokemon Go"
];

¿Cómo eliminar un elemento o índice al inicio de un array? Método shift

videoJuegos.shift();//Tampoco necesita argumentos

//Resultado
videoJuegos = [
  "Zelda - Ocarina of Time",
  "Warcraft III",
  "GTA V",
  "Pokemon Go"
];

¿Cómo eliminar un elemento o índice específico de un array? método splice

videoJuegos.splice(0,2);
// El primer argumento (0) especifica el índice desde donde se va a eliminar el elemento, 
 el segundo argumento (2) cuántos elementos se van a eliminar

//Resultado
videoJuegos = [
  "GTA V",
  "Pokemon Go"
];

¿Cómo reemplazar un elemento o índice de un array?

Para realizar esta tarea se hace de forma muy similar a como cuando queremos saber el contenido de un dato.

videoJuegos[0]

Y ahora le asignamos un nuevo valor a ese índice.

videoJuegos[0] = "Silent Hill 2"

//Resultado
videoJuegos = [
  "Silent Hill 2",
  "Pokemon Go"
];

Incluso de esta forma podemos agregar un elemento nuevo a nuestro array.

videoJuegos[2] = "The Force Unleashed 1"

//Resultado
videoJuegos = [
  "Silent Hill 2",
  "Pokemon Go",
  "The Force Unleashed 1"
];

¿Cómo saber el índice de un elemento dentro de un array? método indexOf

Si sabemos cuál es el valor del dato que vamos a consultar este método es el apropiado.

videoJuegos.indexOf("Silent Hill 2");

//Resultado
0

En este punto les recuerdo que se está manipulando el mismo array para todos los ejemplos, por lo que los resultados son secuenciales.😆

¿Cómo convertir un array en un string? método join

let videoJuegosAString = videoJuegos.join(", ");

//Resultado
"Silent Hill 2, Pokemon Go, The Force Unleashed 1"

El argumento dentro del método join va a determinar cómo van a estar separadas las cadenas de texto dentro del string.

¿Cómo convertir un string en un array? Método split

let newVideoJuegos = videoJuegosAString.split(", ");

//Resultado
newVideoJuegos = [
  "Silent Hill 2",
  "Pokemon Go",
  "The Force Unleashed 1"
];

¿Cómo ordenar los elementos o índices de un array? Método sort

newVideoJuegos.sort();

//Resultado
newVideoJuegos = [
  "Pokemon Go",
  "Silent Hill 2",
  "The Force Unleashed 1"
];

El método sort va a ordenar de forma alfabética siempre y cuando los datos de sus índices sean strings. Va a tomar como prioridad las cadenas de texto que empiecen en mayúsculas.

Los datos numéricos los va a ordenar de forma ascendente tomando en cuenta sólo el primer dígito. Si tenemos números como 18, 1, 2, 27, 5, 3 y 53 los ordenará como [1, 18, 2, 27, 3, 5, 53];

Los datos booleanos los tomará como cadenas de texto.

El orden de jerarquía del método sort serán números > cadenas de texto.

¿Cómo invertir el orden de los elementos o índices de un array? Método reverse

newVideoJuegos.reverse();

//Resultado
newVideoJuegos = [
  "The Force Unleashed 1",
  "Silent Hill 2",
  "Pokemon Go"
];

El método reverse también toma en consideración los mismos puntos del método sort.

¿Cómo concatenar o unir dos arrays en uno solo?

Método concat

Para este ejemplo hará falta un arreglo nuevo.

let masJuegos = ["Zelda - Majoras Mask","Contra"];

//Utilizando el método concat

let todosLosJuegos = newVideoJuegos.concat(masJuegos);

//Resultado
todosLosJuegos = [
  "The Force Unleashed 1",
  "Silent Hill 2",
  "Pokemon Go",
  "Zelda - Majoras Mask",
  "Contra"
];

Spread Operator

El Spread Operator funciona de una manera similar al método anterior pero su sintaxis es mucho más corta. Se utilizan los puntos suspensivos antes de la variable.

let masJuegos = ["Zelda - Majoras Mask","Contra"];

//Utilizando el spread operator

let todosLosJuegos = [newVideoJuegos,...masJuegos];

//Resultado
todosLosJuegos = [
  "The Force Unleashed 1",
  "Silent Hill 2",
  "Pokemon Go",
  "Zelda - Majoras Mask",
  "Contra"
];

//Por motivos didácticos este código se repitió para el ejemplo😆

¿Cómo iterar o recorrer un array? El uso de los métodos y bucles for

Hay veces en los que necesitaremos imprimir el contenido dentro de un array, para esto vamos a ver los ciclos o bucles for.

Bucle - ciclo For / For loop

El bucle for tradicional está compuesto de tres partes: La inicialización de la variable, la condición y la operación. Cada una de las partes separadas por un punto y coma ( ; ).

//Viéndolo como seudocódigo:

for (inicialización de la variable; condición a cumplir; operación){
// Código que va a ser ejecutado tantas veces como se indique dentro de la condición
}

Para recorrer el array de ejemplo de todosLosJuegos se usaría de la siguiente manera:

for (let i = 0; i < todosLosJuegos.length; i++){
console.log(todosLosJuegos[i]);
}

La inicialización de la variable con la letra i es un estándar para esta clase de operaciones. Puedes usar la variable que quieras para ejecutar un bucle. Hay casos donde existen bucles dentro de bucles y se utilizan letras del alfabeto cercanas a la i como la j o la k; también se hace por la comodidad de escribir una variable sencilla dentro de todo ese código.

La condición en este caso es si i (que vale cero) es menor a la cantidad de índices del array (todosLosJuegos.length = 5) vaya aumentando de uno en uno (i++).

La operación también puede ser expresada como i = i + 1 e incluso determinar cada cuántos pasos debe ir operando pero no aplica para este ejemplo.

El resultado de este bucle es la impresión de cada uno de los elementos dentro del array. ¿Por qué? La i dentro de los corchetes va a indicar el elemento que se va a imprimir. ¿Recuerdan que más arriba comenté que los índices se manejan como datos numéricos? Se traduce a algo como esto:

todosLosJuegos[i]// La i es la posición del índice
//Ergo
todosLosJuegos[i = 0]
//Ergo
todosLosJuegos[i = "The Force Unleashed 1"]

//Ahora el operador suma 1

todosLosJuegos[i = 1]

todosLosJuegos[i = "Silent Hill 2"]

//Se vuelve a sumar 1 hasta que i = 5

Método foreach

El método forEach es una manera más sencilla de recorrer un arreglo. En este caso habrá que pasarle como parámetro una función que tome los elementos dentro del array... ¿QUÉ? 😆 Veámoslo.

//Recordando que tenemos el array de esta forma:

todosLosJuegos = [
  "The Force Unleashed 1",
  "Silent Hill 2",
  "Pokemon Go",
  "Zelda - Majoras Mask",
  "Contra"
];

//Aplicando el método forEach

todosLosJuegos.forEach(juego => {
  console.log(juego);
}

La variable juego va a hacer referencia a los elementos dentro del array. El nombre de esta variable puede ser el que quieras pero el estándar es que sea el singular del nombre de la variable del arreglo y para que los índices puedan ser mostrados se mandan a imprimir en la consola. El parámetro de la función y la variable dentro de la impresión por consola deben ser las mismas para que funcione.

Arrays multidimensionales

Los arrays multidimensionales son aquellos que tienen arrays dentro de los arrays. Así de sencillo.😂 Se pueden ver de la siguiente forma:

const inception = ["Sueño principal",["2do nivel de sueño",["3er nivel de sueño",["Aquí se encuentra la esposa psicópata de Leonardo Di Caprio"]
]]];

En el arreglo de inception existen diferentes niveles de arrays. En el primer nivel tenemos el "Sueño principal"; este es el que ocupa todos los niveles o dimensiones del array.

El "2do nivel de sueño" ocupa su espacio más los niveles inferiores.

El "3er nivel de sueño ocupa su espacio más el espacio onírico donde la que se murió falsamente en The Dark Knight Rises esposa del prota se encuentra.

Veamos cómo haría el mismo elenco de The Dark Knight y Di Caprio para ingresar por los diferentes niveles del array:

//Ingresando al Sueño principal

inception[0]

//Ingresando al 2do nivel de sueño

inception[1]

//Ingresando al 3er nivel de sueño

inception[1][1]

// Leo llegando con su esposa psicópata

inception[1][1][1]

Los arrays multidimensionales tienen las mismas reglas de orden de los índices que un array común. Usar este tipo de arrays suele resultar confuso y no es muy común ver demasiados niveles.

Si este artículo te ha resultado de utilidad, házmelo saber a través de mis redes (al menos hasta que coloque una sección de comentarios.🤣) Si no entendiste nada vuelve a leerlo. Y si te gusta Avatar ¿Cuál es tu personaje favorito y por qué Toph Beifong??