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
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.
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);
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"]
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"]
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'
Retorna una cadena de texto con todos los elementos.
var amigos = ['Luis', 'Carlos', 'Marco', 'Eduardo'];
console.log(amigos.toString());
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);
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);
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
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
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]);
Añade nuevos elementos al principio del array.
var miArray = [1, 2];
miArray.unshift(true, "otros datos...");
console.log("Longitud actual:", miArray.length);
Eliminar el último elemento del array.
var miArray = [1, 2];
arreglo.pop();
console.log("Longitud actual:", miArray.length);
Eliminar el primer elemento del array.
arreglo.shift();
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.
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
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
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);
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);
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