Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 1
Lección 14: ArreglosRepaso: arreglos
Este es un repaso de lo que cubrimos en esta lección sobre arreglos.
Muchas veces queremos almacenar listas de valores cuando estamos creando programas y, en JavaScript, podemos hacer eso al usar un tipo de valor llamado un arreglo.
Para crear un arreglo, declaramos una variable como siempre lo hacemos, pero luego rodeamos nuestra lista de valores con corchetes y separamos cada valor con una coma:
var xPositions = [33, 72, 64];Podemos guardar cualquier tipo de valor de JavaScript en un arreglo, no solo números. Aquí hay un ejemplo donde almacenamos una lista de cadenas de caracteres:
var myFriends = ['Winston', 'OhNoesGuy', 'John', 'Sophia'];Muchas veces queremos desplegar la longitud de un arreglo, o hacer algo con base en la longitud del arreglo. Afortunadamente, cada arreglo tiene una propiedad
length que nos dirá la longitud actual del arreglo:text(myFriends.length, 200, 200); // Despliega "4"Cuando queremos acceder a un valor particular en un arreglo, accedemos a él al hacer referencia a su "índice" en el arreglo, el cual representa su posición. El primer índice en un arreglo es 0, así que si queremos acceder al primer elemento en un arreglo, especificamos el nombre de la variable del arreglo, luego corchetes y 0:
text(myFriends[0], 200, 0); // Despliega "Winston"El segundo elemento está en el índice 1, el tercero en el índice 2 y el cuarto en el índice 3:
text(myFriends[1], 200, 100); // Despliega "OhNoesGuy"
text(myFriends[2], 200, 200); // Despliega "John"
text(myFriends[3], 200, 300); // Despliega "Sophia"La indexación basada en cero es uno de los aspectos más confusos de los arreglos para los programadores nuevos, así que ten eso en cuenta si apenas estás empezando con arreglos. ¡Eventualmente te vas a acostumbrar !
A menudo queremos hacer alguna acción para cada elemento en un arreglo, como cuando arriba usamos el comando text() para desplegar los nombres. En lugar de escribir el código una y otra vez, es mejor usar un bucle for para iterar a través de cada uno de los elementos en el arreglo, y hacerle algo a cada elemento dentro del bucle. Tenemos que empezar desde el índice 0, ir hasta llegar al final del arreglo, y agregarle 1 al índice cada vez. Aquí está cómo haríamos eso:
for (var i = 0; i < myFriends.length; i++) {
text(myFriends[i], 200, (i+1)*100);
}Observa cómo ponemos
i dentro de los corchetes, porque representa el índice actual cada vez que se ejecuta el bucle.Los arreglos pueden ser cambiados de muchas maneras. Para empezar, podemos cambiarles un valor:
myFriends[1] = "TheErrorBuddy";También podemos agregarles valores completamente nuevos, al usar el método push(), pasándole el nuevo valor:
myFriends.push("Hopper");Después de ejecutar esa línea de código, la propiedad length de nuestro arreglo cambiará para reflejar la nueva longitud, y el índice final del arreglo será 4 en lugar de 3.
Si quieres una lista completa de lo que puedes hacer con los arreglos en JavaScript, revisa esta referencia. Pero no te preocupes, ¡todo en este repaso te llevará muy lejos!
¿Quieres unirte a la conversación?
alguien que califique mis proyectos :((9 votos)
alguien puede ayudarme con el proyecto haz que llueva, estoy atascado haciendo que las gotas vuelvan al sitio anterior con la funcion IF, Gracias(6 votos)
Es por la distancia entre sol y luna respecto a la tierra.......
Gracias he aprendido bastante durante el curso......FELICIDADES!(8 votos)
no me queda bien claro para que se utiliza el push(8 votos)
El push es un Metodo que Agrega un nuevo elemento al Final del Arreglo o Array y Retorna un Nuevo .length(22 votos)
alguien sabe comohacer el proyecto de haz que llueva siento que es muy dificil y no dan una expliacion completa(4 votos)
como hago para hacer una lluvida cuyas gotas de agua reboten y sean distintas??(3 votos)
oigan, en el siguiente desafío al agregar otro elemento en xPositions debes agregar otro en yPositions para que funcione
{ejem.
xPositions[200, 100];
yPositions[0, 0];
}
tande meses en resolverlo, lo peor es que no hay comentarios de eso, talvez solo sea un tonto, pero igual se los dejo. :v
¡¡¡Jamás se rindan! Saludos.(3 votos)- mouseClicked = function() {
xPositions.push(mouseX);
yPositions.push(mouseY);
drawStars();
};(2 votos) - No termino de entender como funciona que las gotas caigan de continuado usando este trozo de código que dicen en los comentarios:
if (yPositions [i] > 400) {
yPositions[i] = 0;
}
---------------------
PUES yo usé un "%" en la "y" de las gotas :
ellipse(xPositions[i], yPositions[i]%400, 10, 10);(2 votos) 
mouseClicked = function() {
xPositions.push(mouseX);
yPositions.push(mouseY);
drawStars();
};(1 voto)- como cambio de color las gotas en el proyecto "haz que llueva"?(1 voto)
