Arrays y Objetos en JavaScript

Veamos en este tutorial cómo usar los arrays en javascript, cómo se crean objetos en javascript y finalmente, cómo utilizar los arrays de objetos.

Arrays en Javascript

Un array en javascript se puede inicializar de las siguientes formas

 a = [];  // array vacio
 a = [1, 'hola', true];  // array con elementos
 a = new Array();     // array vacío

Se pueden asignar elementos al array independentemente que existan o no

 a = [];
 a[5] = 23;
 // Esto da un array [undefined, undefined, undefined, undefined, undefined, 23]
 a[10] // devuelve undefined

Usar el array como una pila

Se puede añadir un elemento al final del array

 a = [1,2,3];
 a.push('hola');
 // esto da un array [1, 2, 3, "hola"]

y se pueden eliminar elementos del final

 a = [1,2,3];
 b = a.pop();
 // ahora b tiene el elemento 3 y a vale [1,2]

Recorrer el array

Se puede recorrer un array con un bucle normal

 a = [1,2,3];
 for (i=0;i<a.length;i++) {
    // hacer algo con a[i];
 }

Con every(), se puede recorrer un array hasta encontrar algo en él

 a = [1,2,3];
 a.every ( function (elemento) {
    if (elemento no cumple una condicion) {
       return true;  // seguir con el siguiente elemento
    } else {
       return false; // terminar el bucle en este elemento
    }
 });

O se puede recorrer completo con foreach() de esta otra forma

 a = [1,2,3];
 a.foreach ( function (elemento) {
    // hacer algo con elemento
 });

Otras funciones de los arrays

Todos los arrays de javascript heredan de la clase Array, así que todos nuestros arrays tendrán disponibles los métodos de la clase Array.

concat() concatena arrays y nos devuelve un array con todos los elementos

var a = [1,2];
var b = a.concat([3,4],[5,6]);
// b vale [1,2,3,4,5,6]

indexOf() nos devuelve la posición de un elemento en el array, -1 si no existe.

var a = ['hola','adios'];
a.indexOf('hola');  // devuelve 0
a.indexOf('adios');  // devuelve 1 
a.indexOf('tres'); // devuelve -1

lastIndexOf() hace lo mismo, pero empezando a buscar por detrás

var a=["a","b","a"];
a.indexOf("a");  // Devuelve 0
a.lastIndexOf("a");  // Devuelve 2

join() devuelve un string con todos los elementos del array concatenados. Admite un parámetro para poner el separador que queremos entre los elementos, por defecto una coma

var a = ['hola','adios'];
a.join();  // Devuelve "hola,adios"
a.join("---");  // Devuelve "hola---adios"

reverse() le da la vuelta al array

var a=['hola','adios'];
a.reverse();  // Devuelve ["adios", "hola"] y a vale ahora eso.

shift() nos devuelve el primer elemento del array, eliminándolo del mismo

var a=['hola','adios'];
a.shift();  // Devuelve "hola"
a;   // Vale ahora ["adios"]

unshift() añade elementos al principio del array. Hay que fijarse que los añade de forma que queden en el mismo orden que los hemos puesto en los parámetros.

var a = [0,1,2,3,4];
a.unshift (22,23,24);
a; // Ahora vale [22,23,24,0,1,2,3,4]

slice() nos devuelve un trozo del array, debemos indicar dos parámetros, el primer índice (que se incluye en el array resultante) y el último índice (que no se incluye).

var a=['a','e','i','o','u'];
a.slice(1,3); // Devuelve ["e", "i"]

Si omitimos el segundo parámetro, se devuelve hasta el final del array

a.slice(3);  // Devuelve ["o", "u"]

Si algún índice es negativo, se empieza a contar desde el último elemento del array

a.slice(-4,-1); // Devuelve ["e", "i", "o"]

sort() ordena el array. El orden siempre se hace coviritiendo a texto y ordenando alfabéticamente. En el caso de números, el resultado es extraño

var a = [22,2,33,3];
a.sort(); 
a; // vale ahora [2, 22, 3, 33]   ("22" alfabéticamente va antes de "3"

Para ordenar número o si simplemente no queremos orden alfabético sino otro orden, debemos pasar una función que recibe dos parámetros a y b, que serán elementos del array. La función debe devolver un número negativo si consideramos que a es menor que b, positivo si a es mayor que b y 0 si da igual el orden de a y b. Para ordenar números, debemos pasar una función como esta

var a = [22,2,333,33];
a.sort(function(a,b) {return a-b});  // Si a es mayor que b, a-b es positivo.
a; // ahora vale [2, 3, 22, 33]

splice() permite añadir o quitar elementos del array en cualquier posición. El primer parámetro que se pasa es el índice del array donde se quieren insertar o borrar elementos. El segundo parámetro es cuántos elementos queremos borrar (0 si queremos insartar elementos) y el resto de parámetros que pongamos son elementos a añadir al array

var a = [0,1,'b',4,5];
a.splice(2,1,2,3); // Borramos la 'b' y la reemplazamos por los 2 y 3 que faltan en el array
                   // A partir del indice 2 (corresmponde a la 'b'), borramos un elemento (la 'b')
                   // y añadirmos el 2 y el 3.
a; // vale ahora [0,1,2,3,4}

Arrays dispersos

En un array javascript se pueden dejar elementos en medio sin definir. En el siguiente ejemplo, tenemos un array con dos elementos, en las posiciones 0 y 9, el resto de elementos simplemente no existen.

var a = [];
a[0]=1;
a[9]=2;
0 in a;  // devuelve true
1 in a;  // devuelve false
...
9 in a;  // devuelve true

Es distinto que el elemento no exista a que el elemento exista pero esté indefinido. Si en el ejemplo anterior hacemos

a[1]=undefined;
1 in a;   // ahora devuelve true
a[1]      // devuelve undefined
2 in a;   // devuelve false
a[2]      // devuelve undefined también.

La longitud de uno de estos arrays es como si todos sus elementos estuviran definidos

a.length;  // devuelve 10, aunque sólo existen los elementos 0, 1 y 9.

Se pueden eliminar del todo elementos del array haciendo un delete

var a = [1,2,3];
delete a[0];   // el elemento 0 deja de existir
0 in a;        // false
a[1]=undefined;  // El elemento 1 sigue existiendo, pero ahora vale undefined
1 in a;        // true

length del array

El atributo length del array es un atributo más. Se puede modificar para cambiar la longitud del array

var a = [1,2,3];
a.length;    // da 3
a.length=7;  // Ahora el array tiene 7 huecos, los tres primeros rellenos, el resto undefined
a;           // Da [1, 2, 3, undefined × 4]

Si hacemos más corto el array que su número de elementos, estos se truncan elimando los sobrantes

var a = [1,2,3];
a.lenght=2;
a;          // Da [1.2]

También, como cualquier otra propiedad, se pueden |cambiar sus opciones para hacerlo writable o no.

var a = [1,2,3];
Object.defineProperty(a,"length",{writable:false});
a.length=10;     // No da error, pero no cambia el valor de length, que seguirá siendo 3.

Sin embargo, length cambiará si añadimos más elementos al array.

Objetos o diccionarios

En javascript podemos declarar un objeto asi

 a = {};
 // Objeto vacioO
 a = new Object();
 // Objeto vacio
 a = {clave1: "valor", clave2, 22};
 // En a tenemos a.clave1 y a.clave2 con valores "valor" y 22 respectivamente

Una vez creado el objeto, podemos añadir mas valores o modificar los existentes

 a = {};
 a.clave1 = "hola";
 a.clave1 = "adios";

También se puede acceder o crear los elementos como si fuera un array

 a["clave3"] = 4;  // crea la clave3 con valor 4 si no existe.
 var unaVariable = a["clave3"];

Podemos obtener las claves de un objeto con

 Object.keys(a);

Y podemos recorrer todas sus claves con

 for (key in a) {
    // Hacer algo con la clave key
 }

Podemos eliminar una clave y su valor de un Objeto con

 delete a["clave1"];
 // o bien con
 delete a.clave1;

Arrays de objetos

Los arrays de objetos en javascript no tiene nada especial. Podemos crearlos de la forma habitual, como en el siguiente código de ejemplo

// Array con tres objetos creados sobre la marcha.
var unArray = [{pepe:1},{juan:2},{antonio:3}]

// Tres objetos separados y meterlos en el array.
var a = {pepe:1};
var b = {juan:2};
var c = {antonio:3};
unArray = [a,b,c];

Un detalle a tener en cuenta es que en javascript dos objetos son iguales si son la misma referencia en memoria, no si tienen el mismo contenido. Eso hace que el método indexOf() del array no funcione de la forma esperada, como se ve en el siguiente ejemplo

var a = {pepe:1};
var unArray = [{pepe:1}]

// Devueleve -1, no encuentra
unArray.indexOf(a);

Si queremos buscar dentro del array, no nos queda más remedio que recorrerlo e ir comparando nosotros a mano las propiedades que nos interesen del objeto que estamos buscando y de los objetos dentro del array.

Otra opción es usar alguna librería que nos ayude a hacerlo, como la función grep de jQuery