Skip to main content

Capítulo 8 - Arrays

Los arrays son estructuras que nos permiten almacenar muchos datos, sin tener que preocuparnos por el orden o la organización interna.

Otra forma más sencilla de entenderlo, es imaginar que un array es sencillamente como una lista de la compra.

Partiendo de esta analogía será sencillo añadir elementos a nuestra lista:

- Tomates
- Café
- Brócoli
- Cilantro
- Bombillas

Como el orden de los elementos en principio nos da igual, utilizaremos un marcador numerico para referirnos a cada elemento de la lista. lógicamente empezaremos por el cero, ya que somos programadores.

0 - Tomates
1 - Café
2 - Brócoli
3 - Cilantro
4 - Bombillas

Cuando añadimos elementos a la lista el orden puede alterarse o no, en función de si se añadiran antes o después de otros elementos.

0 - Tomates
1 - Café
2 - Te (Nuevo)
3 - Brócoli (movido)
4 - Cilantro (movido)
5 - Bombillas (movido)
6 - Pen Drive (Nuevo)

Cuando eliminamos elementos tambien alteramos la lista.... en función de si están delante de otros elementos o no.

0 - Tomates
1 - café
2 - Te
3 - Brócoli
4 - Cilantro (Borrado)
4 - Bombillas (movido)
6 - Pen Drive (Borrado)

Lógicamente dentro de un array podremos almacenar todo tipo de datos (cadenas, números, objetos, funciones…

Información

En otros lenguajes de programación existen más estructuras similares a estas listas (arrays) como es el caso de las tuplas en Python.

Manejo

Creando un array

Vacío:

var arreglo = [];

Con elementos:

var arreglo = [1, "plátano", "piscina", "manzana", true];

Usando el Índice

var arreglo = [1, "plátano", "piscina", "manzana", true];
console.log("arreglo[1]:", arreglo[1]);

Cambiar un valor del Índice

var arreglo = [1, "plátano", "piscina", "manzana", true];
arreglo[0] = "fresa";
arreglo[4] = "pera";
arreglo[2] = "limón";

Borrando elementos

Sobreescribiendo a undefined

En ocasiones solo queremos dejar el hueco vacío y no cambiar el orden de los elementos de un array.

En estos casos lo mejor es sustituir el valor por undefined ya sea usando delete o igualando.

var arreglo = [1, "plátano"];
arreglo[0] = undefined;
delete arreglo[1];

Borrando el elemento

Al eliminar un elemento del array cambiamos el orden dentro del array.

var arreglo = [1, "plátano", "manzana"];
arreglo.splice(1, 1);
console.log(arreglo[1]) // manzana

Propiedades

.length

Podremos saber cuantos elementos contiene un array.

var arreglo = [1, "plátano", "manzana"]
arreglo.length; // 3

Al tener este dato clave podremos hacer bucles que realicen sus iteraciones en función de la cantidad de elementos.

Presta atención al uso de la variable i en el interior del bucle para recorrer el array.

var numeros = [1, 2, 3, 4, 5];
for (var i = 0; i < numeros.length; i++) {
numeros[i] *= 10;
}
Información

Más adelante veremos que existen estructuras más optimizadas para iterar sobre un array como map() y forEach().

Métodos

Hacemos una recopilación simplificada de los métodos más utilizados, aunque existen muchos más.

.isArray()

Retorna un booleano en función de si el parámetro es un array o no.

var arreglo = [1,2,3]

// Estos son true
Array.isArray([1]);
Array.isArray(arreglo);

// Estos son false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);

.sort()

Permite organizar los elementos de un Array, por orden alfabético o en función numérica (ascendente).

var frutas = ['plátano', 'Naranja', 'Limón', 'Manzana', 'Mango'];
frutas.sort(); // ["Limón", "Mango", "Manzana", "Naranja", "plátano"]
var numeros = [0, 45, 2, -5, 123, -47];
numeros.sort() // [-47, -5, 0, 123, 2, 45]

Aunque en ocasiones el ordenado puede no funcionar como esperamos, si los elementos que componen el Array son de una naturaleza distinta.

var miArray = ['uno', 2, true, 'más datos...'];
miArray.sort(); // [2, "más datos...", true, "uno"]

.reverse()

Invierte el orden de un array.

var miArray = ['uno', 2, true, 'más datos...'];
miArray.reverse();
console.log(miArray) // ["más datos...", true, 2, "uno"]

.join()

Retorna una cadena con todos los elementos de array dentro.

var array = ['dato1', 2, 'masDatos'];
var datosJuntos = array.join(); // 'dato1,2,masDatos'
var datosJuntos2 = array.join(''); // 'dato12masDatos'
var datosJuntos3 = array.join(' + '); // 'dato1 + 2 + masDatos'

.toString()

Retorna una cadena de texto con todos los elementos.

var amigos = ['Luis', 'Carlos', 'Marco', 'Eduardo'];
console.log(amigos.toString());

.toLocaleString()

Retorna como string (configuración regional) todos los elementos.

var numero = 1337.89;
var fecha = new Date();
var miArray = [numero, fecha, 'más datos'];

var arrayConvertida = miArray.toLocaleString();
console.log(arrayConvertida);

.concat()

Retorna un nuevo array con los arrays especificados concatenados.

  • Dos arrays:
var arreglo = ['a', 2, true];
var arreglo2 = [1, 2, 4];

var nuevaArray = arreglo.concat(arreglo2);

console.log(nuevaArray);
  • Múltiples arrays:
var arreglo = ['a', 2, true];
var arreglo2 = [1, 2, 4];
var otroArreglo = ['abc', 1, false]

var nuevaArray = arreglo.concat(arreglo2, [5.25, 100], otroArreglo);

console.log(nuevaArray);

.indexOf()

Devuelve la posición donde se encuentra el elemento en sí ó -1, si no lo encuentra.

var array = [2, 5, 9];
var index = array.indexOf(9); // 2
var index = array.indexOf(12); // -1

.lastIdexOf()

Devuelve la posición del último elemento en sí que coincide ó -1, si no lo encuentra.

var array = [7, 1, 3, 7];
array.lastIndexOf(7); // 3
array.lastIndexOf(2); // -1

.push()

Añadir nuevos elementos al final de un array.

var arreglo = [1, "plátano", "manzana"];
console.log("Antes:", arreglo.length);
arreglo.push("nuevo");
console.log("Después:", arreglo.length);
console.log("arreglo[4]:", arreglo[4]);

.unShift()

Añade nuevos elementos al principio del array.

var miArray = [1, 2];
miArray.unshift(true, "otros datos...");
console.log("Longitud actual:", miArray.length);

.pop()

Eliminar el último elemento del array.

var miArray = [1, 2];
arreglo.pop();
console.log("Longitud actual:", miArray.length);

.shift()

Eliminar el primer elemento del array.

arreglo.shift();

.splice()

Borrar elementos del array, alterando con ello la posición de los demás.

var frutas = ['plátano', 'Naranja', 'Limón', 'Manzana', 'Mango'];
console.log("frutas[1]:", frutas[1]) // Naranja
frutas.splice(1, 3);
console.log("frutas[1]:", frutas[1]) // Mango
console.info("frutas.length:", frutas.length); // 2

Si deseamos conservar en un variable aquellos elementos que hemos eliminado, es necesario hacer una asignación como ésta:

var frutas = ['plátano', 'Naranja', 'Limón', 'Manzana', 'Mango'];
var citricos = frutas.splice(1, 2);
console.info("citricos:", citricos);
console.info("frutas.length:", frutas.length);

Métodos Avanzados

Algunos de los métodos más utilizados, requieren comprender en profundidad el manejo de funciones y en especial el retorno.

Información

Como aún no hemos hablado de funciones directamente, nuestra recomendación es leer por encima los siguientes métodos y su funcionamiento... para regresar más adelante a este capítulo.

.some()

Verifica si alguno de los elementos del array pasan la prueba implementada por la función dada.

function tamañoValido(elemento, indice, arreglo) {
return elemento >= 10;
}
[12, 5, 8, 130, 44].some(tamañoValido); // true
[12, 54, 18, 130, 44].some(tamañoValido); // true

.every()

Verifica si todos los elementos del array pasan la prueba implementada por la función dada.

function tamañoValido(elemento, indice, arreglo) {
return elemento >= 10;
}
[12, 5, 8, 130, 44].every(tamañoValido); // false
[12, 54, 18, 130, 44].every(tamañoValido); // true

.filter()

Crea un nuevo array con aquellos elementos que cumplan la condición.

function tamañoValido(elemento) {
return elemento >= 10;
}
var filtrados = [true, 134, 10, 0, null, "Hola"].filter(tamañoValido);

.forEach()

Se ejecuta la función por cada elemento del array.

function logger(element, index, array) {
console.log("array[" + index + "] = " + element);
}
[2, 5, 9].forEach(logger);

.map()

Itera sobre el array aplicando una transformación, que definimos en una función y finalmente retorna un nuevo array con todos los componentes modificados.

var arreglo = ["plátano", "fresa", "lima", "manzana"];
var resultado = arreglo.map(function (elemento){return elemento + " modificado!"});
console.log(resultado);

Arrays multidimensionales

No dejéis que el nombre os asuste, sencillamente cuando tenemos arrays almacenadas dentro de otros arrays, entendemos que se trabaja sobre Matrices o Arrays multidimensionales. Es sencillo:

var arreglo1 = ["plátano", "fresa", "lima", "manzana"];
var arreglo2 = ["entrante", "primero", "segundo", "postre"];

var juntandoArreglos = [arreglo1, arreglo2];

console.log(juntandoArreglos[0][0]); // plátano
console.log(juntandoArreglos[1][3]); // postre