En este capítulo de nuestro tutorial de Javascript vamos a ver un importante elemento para trabajar con múltiples valores, el array.
Introducción
Los arrays, también llamados arreglos o matrices, son objetos ya definidos por Javascript que nos permiten almacenar listas de valores.
Estas estructuras, a diferencia de las variables en las que tan solo almacenamos un valor, son capaces de contener multiples valores de forma independiente.
Si por ejemplo queremos tener una lista de colores a la que podamos recurrir para cambiar dinámicamente el color de fondo de nuestra página, no necesitaremos un montón de variables para que cada una guarde un color. Con un solo array vamos a poder almacenar tantos colores como queramos y recuperar cualquiera de ellos individualmente cuando lo necesitemos.
La manera de acceder a un valor concreto de esa lista es a través de un índice. Cuando se crea la lista, cada valor ocupa una posición que se identifica con un número comenzando por el 0. Por ejemplo si tenemos un array con 10 valores, el primer valor se identificará con el índice 0 y el último con el índice 9.
NOTA DE INTERÉS:
A pesar de que en ocasiones se denomina al array como «variable multidimensional», en Javascript los arrays no son variables como ocurre en otros lenguajes de programación.
Crear un array
Veámos la sintaxis para crear un array directamente (literal).
Vamos con un ejemplo:
var miArray = ["red", "green", "blue", "yellow", "magenta", "black"]; alert("El segundo valor es: " + miArray[1]); // 18.1
En la primera línea hemos declarado el array asignándolo a una variable con el nombre «miArray» y le hemos dado 6 valores.
A continuación hemos recuperado el valor situado en segunda posición y lo hemos mostrado en un alert, para ello hemos escrito el nombre del array y seguidamente hemos colocado entre corchetes el número índice del valor que queremos recuperar.
Importante:
La primera posición de un array siempre comienza en 0
También se puede crear un array con un constructor, veamos un ejemplo.
var miArray = new Array("red", "green", "blue", "yellow"); // 18.2
Hemos creado el array con la palabra clave «new» y lo hemos asignado a la variable «miArray».
Si bien este último modo es válido, se aconseja utilizar el modo del primer ejemplo por su simplicidad y rapidez. Además trabajando con valores numéricos puede surgir algún error.
Otra opción es definir primero el array y asignarle valores posteriormente.
var miArray = []; miArray[0] = "red"; miArray[1] = "green";
Nota de interés
Un array puede contener objetos, funciones e incluso otros arrays (arrays bidimensionales).
Si queremos modificar uno de los valores del array tan solo tenemos que acceder a su posición y asignarle un nuevo valor.
miArray[1] = "pink";
Propiedades y métodos de los array
Propiedad «length»
El objeto array sólo posee una propiedad, la propiedad «length». Con ella obtendremos la longitud (número de elementos) del array.
var miArray = ["red", "green", "blue", "yellow"]; alert(miArray.length); // 18.3
Método pop()
Este método devuelve el último elemento de un array y lo elimina.
var miArray = ["red", "green", "blue", "yellow"]; alert(miArray.pop()); // Devuelve el último valor y lo elimina document.write(miArray); // 18.4
Método push()
Con «push» añadimos uno o más elementos al final del array.
var miArray = ["red", "green", "blue", "yellow"]; miArray.push("orange","pink"); // Añadimos "orange" y "pink" alert(miArray); // 18.5
El método «push» también devuelve la longitud del array después de añadir el nuevo valor.
var miArray = ["red", "green", "blue", "yellow"]; alert(miArray.push("orange")); // Añadimos "orange" y mostramos la longitud del array // 18.6
Método shift()
Funciona como el metodo «pop» pero actuando sobre el primer valor.
var miArray = ["red", "green", "blue", "yellow"]; alert(miArray.shift()); // Devuelve el primer valor y lo elimina document.write(miArray); // 18.7
Método unshift()
Funciona como el método «push» pero añadiendo el o los valores al comienzo del array.
var miArray = ["red", "green", "blue", "yellow"]; alert(miArray.unshift("orange")); // Añade el valor al comienzo y devuelve la longitud document.write(miArray); // 18.8
Método concat()
Este método devuelve un array como resultado de la unión de dos o más arrays.
var miArray = ["red", "green", "blue", "yellow"]; var otroArray = ["orange", "pink", "grey", "silver"]; alert(sumaArrays = miArray.concat(otroArray)); // 18.9
De momento estos son algunos de los métodos que podemos utilizar con los arrays, en el próximo capítulo veremos más.
Dejar una opinión