Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

un array en Javascript es una variable que puede contener multiples valores como por ejemplo si tuviésemos que memorizar varios cursos en lugar de tener una variable para cada curso lo que haremos es tener una variable de tipo array en los siguientes ejemplos aprendes cómo funciona.

como puedes ver en el siguiente ejemplo la sintaxis es muy simple creamos una variable y después del símbolo igual y entre corchetes introducimos los valores separados por comas

var nombre-array = [valor1valor2, ...];

como por ejemplo si quisiesemos memorizar varios cursos y siguiendo la sintaxis anterior ….

crearemos una variable llamada cursos, pondremos el símbolo =  un corchete [  y un valor,  recuerda que si es texto tiene que ir entre comillas ”  y si es un número no es necesario

y después una coma    ,     y otro valor.

y así sucesivamente,  y para finalizar cerramos el corchete ]  y un punto y coma   ;      para finalizar la línea:

var cursos = ["Javascript", "JQuery", "PHP"];

con el siguiente ejemplo puedes ver cómo mostrar el contenido de un array

tenemos un párrafo identificado como demo y una vez hemos declarado el array cursos,  como hemos hecho anteriormente,  identificamos el elemento demo por su id y utilizamos el método inner HTML indicando que muestre el contenido de la variable cursos

<p id="demo"></p>
<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;
</script>

una forma más visual de declarar un array es separándolo por lineas el resultado sería el mismo

var cursos = [
"Javascript",
"JQuery",
"PHP"
];

Acceder a los elementos de un Array

para poder acceder alguno de los elementos de un array primero tienes que saber que cada uno de los elementos está identificado por un índice es decir el primero es 0 el segundo es 1 y así sucesivamente

por ejemplo en este caso JavaScript está en el índice 0 jQuery esté en el índice 1 y  PHP está en el índice 2

var cursos = ["Javascript", "JQuery", "PHP"];

si seguimos con el ejemplo anterior del párrafo identificado como demo con el siguiente ejemplo mostramos el segundo elemento de la matriz cursos en este caso jQuery,  si quisieses que mostrase el primer valor pones 0 entre los corchetes,  y si quisieses que mostrase el tercer valor pones 2 entre corchetes

document.getElementById("demo").innerHTML = cursos[1];

y también puedes modificar un valor como puedes ver en el siguiente ejemplo en el cual asignamos a el tercer elemento el curso HTML5 recuerda siempre que un array empieza por 0

cursos[2]="HTML5";

para mostrar cada uno de los elementos de un array utilizaremos una estructura de control que haga un loop en el array,  en este caso utilizaremos la estructura for

si te fijas en el siguiente ejemplo primero hemos definido el array cursos con los diferentes cursos y hemos creado una variable llamada texto que empieza una lista desordenada

después empezamos el loop, y entre paréntesis iniciamos una variable i   , en la condición indicamos que realice la siguiente acción mientras la variable i sea menor de la longitud del array cursos utilizando el método length que nos devuelve el tamaño del array

dentro de las llaves vamos añadiendo a la variable texto cada uno de los elementos del array cursos y como índice utilizamos la variable i

después solo nos falta mostrar el resultado de la variable texto en el elemento identificado como demo en este caso un párrafo

<p id="demo"></p>
<script>
var cursos = ["Javascript", "JQuery", "PHP"];
texto="<ul>";

for (i = 0; i < cursos.length; i++) {
texto += "<li>" + cursos[i] + "</li>";
}

texto += "</ul>";
document.getElementById("demo").innerHTML = texto;
</script>

para añadir elementos a nuestro array utilizamos el método push

cursos.push("HTML5");

o también puedes utilizar el método length del array

cursos[cursos.length] = "HTML5";

otros métodos que puedes utilizar con un Array son:

toString(): convierte el array en texto separado por comas

join(” * “): convierte el array en texto pero indicando tú el separador dentro de los paréntesis

pop(): elimina el último elemento del array

push(): añade un nuevo elemento al final del array

shift(): elimina el primer elemento del array

unshift(): añade un elemento al principio del array

concat(): crea un nuevo array juntando dos arrays