informaticaPC

Tutorial de JavaScript

Crear un array, insertar elementos, recorrer, buscar datos...


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

El Objeto Array()

Si bien anteriormente hemos visto cómo crear un array en JavaScript, podemos crearlos también utilizando el objeto Array():

// Declaración de un array de cuatro posiciones y asignación de valores:
var aDias = new Array("Domingo", 33, true, "Francia");

// Declaración de un array de 12 posiciones, sin asignarle valores:
var aMeses = new Array(12);

Al crear un array de este modo tanto como del explicado con anterioridad, obtendremos un objeto Array con cuyos métodos y propiedades podremos realizar varias operaciones sobre el mismo, tal y como explicaremos a continuación.

Más información

Vea también: [ Crear arrays en JavaScript ]

Obtener el número de elementos en un array

Para obtener el número de elementos de un array usaremos la propiedad length del siguiente modo:

var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
alert( aDias.length );  // Devuelve 7

Recorrer un array

Para recorrer los elementos de un array se suele usar la sentencia de control for(), teniendo en cuenta que las posiciones o índices comienzan desde cero.

En el siguiente ejemplo, un bucle for() es usado para recorrer un array de 7 elementos, mostrando mediante alert() cada posición y su valor:

var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
var contador;

for( contador=0; contador < 7; contador++ ) {
    document.write( "El valor de la posición [" + contador + "] es [" + aDias[contador] + "]<br/>" );
}

Recorrer un array

Descargar ejemplo

Buscar datos en un array

Para comprobar si existe un valor en un array lo recorreremos con un bucle for(), tal y como hemos visto anteriormente.

En el siguiente ejemplo se comprueba si el nombre 'PEPE' existe en el array 'aDias', quedando la variable 'encontrado' con un valor de '-1' si no se ha encontrado, o conteniendo la posición en que se halla:

var aDias = ["MARIA", "JUAN", "PEDRO", "ISABEL", "PEPE", "FERNANDO", "ROBERTO"];
var contador;
var encontrado = -1;

for( contador=0; contador < aDias.length; contador++ )
{
    if( aDias[contador] == "PEPE") {
        encontrado = contador;
        break;
    }
}

if( encontrado == -1 )
    alert("No se ha encontrado el nombre");
else
    alert("PEPE está en la posición [" + encontrado + "]" );

Descargar ejemplo

Observa que con break forzamos la salida del bucle en caso de que se encuentre el dato (ya no es necesario seguir recorriéndolo hasta el final).

Buscar en un array

Insertar elementos en un array

Para insertar elementos en un array usaremos los métodos push() (los inserta al final) y unshift() (los inserta al principio) del Objeto Array(), que además devuelven el número total de elementos del mismo tras insertar un nuevo.

var aDias = ["Martes", "Miércoles", "Jueves"];

aDias.unshift("Lunes");
var num = aDias.push("Viernes");

// El array quedaría: "Lunes", "Martes", "Miércoles", "Jueves", "Viernes"
document.write( aDias + "<br />" );

document.write( num + "<br />" );           // Devuelve 5
document.write( aDias.length + "<br />" );  // Devuelve 5

Descargar ejemplo

También podemos usar el método splice() para insertar elementos en un array: en el primer parámetro indicamos en qué posición deseamos insertarlo (recuerda que comienzan desde cero), en el segundo pondremos cero (puesto que este método es usado también para borrar elementos de un array, como veremos más adelante), y como tercer parámetro indicaremos el valor que deseamos guardar en dicha posición.

var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

// En la posición 2 insertamos el valor 88
aDias.splice(2, 0, 88);

// El array quedaría: "Lunes", "Martes", 88, "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo";
alert( aDias );

Descargar ejemplo

Observa cómo los valores de las posiciones existentes, desde la que hemos insertado el nuevo elemento, se han desplazado a la derecha.

Como hemos comentado, se puede usar splice() para borrar elementos de un array, así pues podemos combinar las dos acciones. Por ejemplo, si como segundo parámetro indicamos un número que no sea cero se insertará el elemento deseado y también se borrarán las posiciones indicadas:

var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

// En la posición 2 insertamos el valor 88, y eliminamos la siguiente posición
aDias.splice(2, 1, 88);

// El array quedaría: "Lunes", "Martes", 88, "Jueves", "Viernes", "Sábado", "Domingo";
alert( aDias );

Descargar ejemplo

Borrar elementos en un array

Con el método shift() eliminaremos el primer elemento, y con pop() el último. Devuelven el valor del elemento borrado:

var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
document.write( aDias.length + "<br />" );  // Devuelve 7

var primero = aDias.shift();
document.write( aDias + "<br />" );   // El array queda: "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"

var ultimo = aDias.pop();
document.write( aDias + "<br />" );   // El array queda: "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"

document.write( aDias.length + "<br />" );  // Devuelve 5

document.write( "El primer elemento era: " + primero + "<br />" );  // Devuelve "Lunes"
document.write( "El último elemento era: " + ultimo + "<br />" );   // Devuelve "Domingo"

Otro método que podemos usar es splice(), con el que podemos borrar determinados elementos: en el primer parámetro indicamos a partir desde qué posición borrar (recuerda que comienzan desde cero), y en el segundo cuántos elementos deseamos eliminar (si se pone cero, no se eliminará ninguno).

var aDias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

// Desde la posición 3 borramos 2 elementos (el actual y el siguiente, las posiciones 2 y 3)
aDias.splice(3, 2);

// El array queda: "Lunes", "Martes", "Miércoles", "Sábado", "Domingo"
alert( aDias );
Primera página Anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso