If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Repaso: 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?

  • Avatar blobby green style para el usuario Patricia Solorzano
    no me queda bien claro para que se utiliza el push
    (8 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar duskpin ultimate style para el usuario geraldine cespedes
    alguien que califique mis proyectos :(
    (9 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar leaf red style para el usuario Juan Manuel Tena
    Es por la distancia entre sol y luna respecto a la tierra.......

    Gracias he aprendido bastante durante el curso......FELICIDADES!
    (8 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar primosaur seedling style para el usuario Miguel Damas
    Alguien más cree que el código del anterior desafío ( Creador de constelaciones) es muy largo e innecesario??
    (0 votos)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar blobby green style para el usuario LUIS HURTADO Y SANTILLAN
      Para un aprendiz de programación no le es posible determinar si es largo e innecesario. Su métrica es la adecuada para un sistema de inducción necesario para el lego de la materia. A medida que avanzamos nos damos cuenta de que se pueden hacer las cosas de otra manera, menos y mejor. Probablemente una evaluación de tus conocimientos llevaría a Khan a colocarte en el nivel que mereces.
      (11 votos)
  • Avatar marcimus pink style para el usuario valen villar bermudez
    alguien sabe comohacer el proyecto de haz que llueva siento que es muy dificil y no dan una expliacion completa
    (4 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar winston default style para el usuario pablomoralesalonso
    como hago para hacer una lluvida cuyas gotas de agua reboten y sean distintas??
    (3 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar marcimus red style para el usuario Jose Juan Gallardo Cabrera
    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)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar blobby green style para el usuario Manuela  Mariscotti
    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)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar primosaur seedling style para el usuario Sara Aguilar
    mouseClicked = function() {
    xPositions.push(mouseX);
    yPositions.push(mouseY);
    drawStars();
    };
    (1 voto)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar blobby green style para el usuario Matías Santos
    como cambio de color las gotas en el proyecto "haz que llueva"?
    (1 voto)
    Avatar Default Khan Academy avatar para el usuario
¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.