Arrays en Javascript

  • Por
Vemos que son los arrays en Javascript, para qué sirven y cómo utilizarlos. Veremos diversas formas de crearlos, así como definir y acceder a sus valores.

Pasamos a un nuevo tema en el Manual de Javascript, en el que vamos a conocer nuestra primera estructura de datos.

En los lenguajes de programación existen estructuras de datos especiales que nos sirven para guardar información más compleja que simples variables. Una estructura típica en todos los lenguajes es el Array, que es como una variable donde podemos introducir varios valores, en lugar de solamente uno como ocurre con la variables normales.

Los arrays nos permiten guardar varias variables y acceder a ellas de manera independiente, es como tener una variable con distintos compartimentos donde podemos introducir datos distintos. Para ello utilizamos un índice que nos permite especificar el compartimiento o posición a la que nos estamos refiriendo.

Nota: Los arrays se introdujeron en versiones Javascript 1.1 o superiores, es decir, solo los podemos utilizar a partir de los navegadores 3.0. Para navegadores antiguos se puede simular el array utilizando sintaxis de programación orientada a objetos, pero la verdad es que actualmente esta limitación no debe preocuparnos. Además, dada la complejidad de la tarea de simular un array por medio de objetos, por lo menos en el momento en que nos encontramos y las pocas ocasiones en que lo necesitaremos, opinamos que es mejor olvidarnos de ese asunto y trabajar simplemente con los arrays normalmente. Así que en este artículo y los siguientes vamos a ver cómo utilizar el auténtico array de Javascript.

Creación de Arrays javascript

El primer paso para utilizar un array es crearlo. Para ello utilizamos un objeto Javascript ya implementado en el navegador. Veremos en adelante un tema para explicar lo que es la orientación a objetos, aunque no será necesario para poder entender el uso de los arrays. Esta es la sentencia para crear un objeto array:

var miArray = new Array()

Esto crea un array en la página que esta ejecutándose. El array se crea sin ningún contenido, es decir, no tendrá ninguna casilla o compartimiento creado. También podemos crear el array Javascript especificando el número de compartimentos que va a tener.

var miArray = new Array(10)

En este caso indicamos que el array va a tener 10 posiciones, es decir, 10 casillas donde guardar datos.

Es importante que nos fijemos que la palabra Array en código Javascript se escribe con la primera letra en mayúscula. Como en Javascript las mayúsculas y minúsculas si que importan, si lo escribimos en minúscula no funcionará.

Tanto se indique o no el número de casillas del array javascript, podemos introducir en el array cualquier dato. Si la casilla está creada se introduce simplemente y si la casilla no estaba creada se crea y luego se introduce el dato, con lo que el resultado final es el mismo. Esta creación de casillas es dinámica y se produce al mismo tiempo que los scripts se ejecutan. Veamos a continuación cómo introducir valores en nuestros arrays.

miArray[0] = 290 
miArray[1] = 97 
miArray[2] = 127

Se introducen indicando entre corchetes el índice de la posición donde queríamos guardar el dato. En este caso introducimos 290 en la posición 0, 97 en la posición 1 y 127 en la 2.

Los arrays en Javascript empiezan siempre en la posición 0, así que un array que tenga por ejemplo 10 posiciones, tendrá casillas de la 0 a la 9. Para recoger datos de un array lo hacemos igual: poniendo entre corchetes el índice de la posición a la que queremos acceder. Veamos cómo se imprimiría en la pantalla el contenido de un array.

var miArray = new Array(3) 

miArray[0] = 155 
miArray[1] = 4 
miArray[2] = 499 

for (i=0;i<3;i++){ 
   	document.write("Posición " + i + " del array: " + miArray[i]) 
   	document.write("<br>") 
}

Hemos creado un array con tres posiciones, luego hemos introducido un valor en cada una de las posiciones del array y finalmente las hemos impreso. En general, el recorrido por arrays para imprimir sus posiciones, o cualquier otra cosa, se hace utilizando bucles. En este caso utilizamos un bucle FOR que va desde el 0 hasta el 2.

Podemos ver el ejemplo en marcha en otra página.

Tipos de datos en los arrays

En las casillas de los arrays podemos guardar datos de cualquier tipo. Podemos ver un array donde introducimos datos de tipo carácter.

miArray[0] = "Hola" 
miArray[1] = "a" 
miArray[2] = "todos"

Incluso, en Javascript podemos guardar distintos tipos de datos en las casillas de un mismo array. Es decir, podemos introducir números en unas casillas, textos en otras, boleanos o cualquier otra cosa que deseemos.

miArray[0] = "desarrolloweb.com" 
miArray[1] = 1275 
miArray[1] = 0.78 
miArray[2] = true

Declaración e inicialización resumida de Arrays

En Javascript tenemos a nuestra disposición una manera resumida de declarar un array y cargar valores en un mismo paso. Fijémonos en el código siguiente:

var arrayRapido = [12,45,"array inicializado en su declaración"]

Como se puede ver, se está definiendo una variable llamada arrayRapido y estamos indicando en los corchetes varios valores separados por comas. Esto es lo mismo que haver declarado el array con la función Array() y luego haberle cargado los valores uno a uno.

En el próximo artículo seguiremos viendo cosas relacionadas con los arrays, en concreto aprenderemos a acceder a la longitud de un array.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Ernesto

08/12/2006
Un curso excelente de javascript

Elsie

10/6/2009
bueno
me gusto la explicacion y me ha ayudado mucho gracias.

Marcel

27/8/2010
Problema con arreglo en IE
Hola , tengo un problema con arrays en IE, en la siguiente funcion, un array es pasado como parametro pero los elementos de este se tornan en undefined al recorrer dicho array con un loop for

function removerComas(arr){
var arreglo=[];
var j=0;

for(var i=0;i < arr.length; i++){

if (arr[i] != ','){

arreglo[j]=arr[i];
j++;
}

}

return arreglo;
}

Que puedo hacer ??? gracias

MizaR ZetA

20/10/2010
Respuesta a problema de javascript en IE
Tu código no tiene error, yo lo probe y funciona tal cual, lo que no entiendo es que quieres hacer con ese array pues solo verificas si el valor de la casilla es una coma. Te paso la pequeña prueba que hice y funciona sin problemas.

var arr = new Array("1",",","3",",");
var arr2 = removerComas(arr);
for(var i=0;i < arr2.length; i++){
alert(arr2[i]);
}

function removerComas(arr){
var arreglo=[];
var j=0;
for(var i=0;i < arr.length; i++){
if (arr[i] != ','){
arreglo[j]=arr[i];
j++;
}
}
return arreglo;
}

Luis

13/12/2010
arrays y menus
hola buenas
alguien me puede ayudar con este ejercicio

Hacer un programa que utilice dos arrays para almacenar los nombres y las notas de los alumnos de una clase.

- En el programa principal se definiran los arrays (notas y nombres) con un tamaño de 10 elementos, y se introducirá su contenido.
La nota deberá ser un valor entre -1 y 10.
Si el valor es -1 significará que el alumno no se ha presentado.

- Confeccionar un menu que deje escoger entre las siguientes opciones:
. MEDIA: será la media de las notas de los alumnos que se han presentado.
. APROBADOS: escribir el nombre de los alumnos que hayan aprobado
. FIN: terminar el programa

Las opciones del menu se programarán mediante funcione

Bersek

12/8/2011
Error de sintaxis
En la sintaxis te falta agregar el famoso ';' al final de cada línea.

midesweb

22/9/2011
sobre el ;
Hola,
Javascript no necesita el mencionado punto y coma ";" al final de cada sentencia. Lenguajes como Java o C sí que lo requieren de manera obligatoria, pero en Javascript es meramente opcional.
Así que no hay necesidad de corregir nada en este artículo.

Zinnox

03/3/2012
Faltilla
Todos los manuales son magníficos y las explicaciones claras y fáciles de seguir. El estilo y la ortografía también son perfectos, pero a veces es inevitable que se cuelen diablillos que deslucen el conjunto, como el "haver" al final de este artículo. Corregido el fallo y borrado este mensaje, quedará perfecto.

Cirene

30/3/2012
ayuda por favor
el problema que yo tengo es el siguiente:
tengo tres listas menus en cada una de ellas tengo las opciones de:
1 Lista Menu 1
Ingles
Tecnico Bancario
Tecnico Contabilidad
Secretariado
Tecnologias de la informacion
Contaduria General
2 Lista Menu 2
Ingles
Tecnico Bancario
Tecnico Contabilidad
Secretariado
Tecnologias de la informacion
Contaduria General
3 Lista Menu 3
Ingles
Tecnico Bancario
Tecnico Contabilidad
Secretariado
Tecnologias de la informacion
Contaduria General
Por ejemplo si en la lista 1 selecciono Ingles se me deberia deshabilitar Ingles en la lista 2 y en la lista 3 lo mismo con las otras opciones


Gracias Por la ayuda

karlex

05/4/2012
vector de consulta
la consulta es la siguiente ¿si se quiere estudiar otra carrera tecnica, cual seria?(elija tres opciones en orden de importancia del uno al tres)?

1.
<select name="Primero"onClick="Ingles2.enabled=!this.form,Ingles3.enabled=false">
<option value="Ninguna">Selecionar de la lista</option>
<option value="Ingles"name="Ingles1">Ingles</option>
<option value="TecBan"name="TecBan1">Técnico Bancario</option>
<option value="TecConta"name="TecConta1">Técnico en Contabilidad Computarizada</option>
<option value="Secre"name="Secre">Secretariado Ejecutivo</option>
<option value="Info"name="Info1">Tecnologías de la información y comunicación</option>
<option value="Conta"name="Conta1">Contaduría General</option>
</select><br>
2.
<select name="Segundo">
<option value="Ninguna">Seleccionar de la lista</option>
<option value="Ingles"name="Ingles2"diabled="disabled">Ingles</option>
<option value="TecBan"name="TecBan2"enabled="disabled">Técnico Bancario</option>
<option value="TecConta"name="TecConta2"enabled="disabled">Técnico en Contabilidad Computarizada</option>
<option value="Secre"name="Secre2"enabled="disabled">Secretariado Ejecutivo</option>
<option value="Info"name="Info2"enabled="disabled">Tecnologías de la información y comunicación</option>
<option value="Conta"name="Conta2"enabled="disabled">Contaduría General</option>
</select><br>
3. <select name="Tercero">
<option value="Ninguna">Seleccionar de la lista</option>
<option value="Ingles"name="Ingles3"disabled="disabled">Ingles</option>
<option value="TecBan"name="TecBan3"disabled="disabled">Técnico Bancario</option>
<option value="TecConta"name="TecConta3"disabled="disabled">Técnico en Contabilidad Computarizada</option>
<option value="Secre"name="Secre3"disabled="disabled">Secretariado Ejecutivo</option>
<option value="Info"name="Info3"disabled="disabled">Tecnologías de la información y comunicación</option>
<option value="Conta"name="Conta3"disabled="disabled">Contaduría General</option>
</select></p>
<br>

<script>

var listado = new Array(6)

listado[0]=['ninguna'];
listado[1]=['Ingles'];
listado[2]=['TecBan'];
listado[3]=['TecConta'];
listado[4]=['Secre'];
listado[5]=['Info'];
listado[6]=['Conta'];

for(i=0;i<listado.length;i++) alert(listado[i]);


</script>

Angela Castro

08/8/2012
Problemas de un menú con Arrays en navegadores distintos a IE
Cree un menú con array y no funciona, no me muestra nada en Google Chrom ni Mozilla, solo funciona con IE. Por qué?

paco

07/6/2013
ejemplo
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function aleatorio(min,max){
return Math.round(Math.random()*(max-min))+min;
}
function alumno(nombre2,apellidos2,edad2) {
this.nombre=nombre2;
this.apellidos=apellidos2;
this.edad=edad2;
}
function genera_letras(numlet){

var cadena='';
for(var i=0;i<numlet;i++){
if(i==0){
cadena+=String.fromCharCode(aleatorio(65,90)); //mayusculas

}else{
cadena+=String.fromCharCode(aleatorio(97,122)); //minusculas
}
}

return cadena;
}
var alumnos=new Array();
for(var i=0;i<7;i++){
alumnos.push(new alumno(genera_letras(5),genera_letras(7)+' '+genera_letras(7),aleatorio(12,19)));
}
document.write("<table border='1'>");
document.write("<tr><th>Nombre</th><th>Apellidos</th><th>Edad</th></tr>");
for(var i=0;i<7;i++)
{
document.write("<tr><td>"+alumnos[i].nombre+"</td>");
document.write("<td>"+alumnos[i].apellidos+"</td>");
document.write("<td>"+alumnos[i].edad+"</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>

paco

07/6/2013
ejemplo domino
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function mezclar_fichas(numveces)
{
// var auxa=0;
//var auxb=0;

for(var i=0;i<numveces;i++)
{
do
{
aleatorio1=1+Math.round((Math.random()*(28-1)));
aleatorio2=1+Math.round((Math.random()*(28-1)));
}
while(aleatorio1==aleatorio2);


auxa=vector1[aleatorio1];
auxb=vector2[aleatorio1];
vector1[aleatorio1]=vector1[aleatorio2];
vector2[aleatorio1]=vector2[aleatorio2];
vector1[aleatorio2]=auxa;
vector2[aleatorio2]=auxb;

}


}


function generar_fichas()
{
posicion=0;
for(i=0;i<=6;i++)
{
for(z=i;z<=6;z++)
{
vector1[posicion]=i;
vector2[posicion]=z;
posicion++;
}

}

}

var vector1=new Array(28);
var vector2=new Array(28);
generar_fichas();
mezclar_fichas(8);

var total=0;
var total2=0;
var total3=0;
var total4=0;
var jugador=new Array(4);
for(i=0;i<28;i++)
{
if(i<7)
{
total=total+vector1[i]+vector2[i];


}else if(i>=7 && i<=13)
{
total2=total2+vector1[i]+vector2[i];
}else if(i>13 && i<21)
{
total3=total3+vector1[i]+vector2[i];
}else if(i>=21)
{
total4=total4+vector1[i]+vector2[i];
}

}

alert("O xogador número 1 ten a seguinte puntuacion: "+total+" "+"O xogador número 2 ten a seguinte puntuacion: "+total2+" "+"O xogador número 3 ten a seguinte puntuacion: "+total3+" "+"O xogador número 4 ten a seguinte puntuacion: "+total4);



</script>
</body>
</html>

Erik Juarez

26/3/2014
Felicitacion
Felicidades, tu explicación es perfecta y gracias a esto es fácil comprenderlo. Gracias!

edson

16/6/2014
necesito ayuda no se como hacer este problema n javascript(uso de array)
28. DISEÑAR UN ALGORITMO PARA ROTAR A LA IZQUIERDA LOS DÍGITOS IMPARES DE UN NUMERO CUALQUIERA QUE TENGA UNA CANTIDAD MAYOR O IGUAL A 6 DÍGITOS.
EJEMPLO:
6325427
6527423

Sergio

18/9/2014
Buen curso
gracias por los cursos muy bien estructurados que hay aqui.

Ortografía

21/10/2014
CORRÍGELO
"Esto es lo mismo que haver declarado el array con la función Array() y luego haberle cargado los valores uno a uno."
¡¡HABER!!

Tmr

27/5/2015
Tabla
Como podria cargar una array multidimensional en una tabla dinàmica con javascript?
gracias!

Andrea

27/9/2015
array
Como hago para que pida un número al usuario y a partir de este crear un bucle que vaya pidiendo números enteros y se queden guardados en una Array?

gracias antemano!!

Decomalcalcosoy

13/11/2015
Como crear un lista de nombres con array
Amigo quisiera que me ayudaras con una lista de alumnos que tengo que hacer, digamos un ejemplo de 10 personas con "x" nombre, que debo de poner en una lista donde igual deberá ir sus calificaciones, no se si me allas entendido, pero espero & si, esperare tu respuesta a mi correo leonardoperegrino50@gmail.com.

Consultor

08/4/2016
Consulta
Si tengo for(var i=0, i<=3, i++);
Que debo hacer para que se forme un array nuevo que vaya de la siguiente manera [0, 01, 012, 0123]; es decir que me vaya agregando los números del for pero de manera consecutiva?

Diuned Corzo

11/4/2016
Exelente curso!!! Gracias
Exelente curso!!! Gracias