7.5 KiB

Raw Permalink Blame History

Conceptos básicos de JavaScript: Arreglos y Bucles

Sketchnote por Tomomi Imura

Cuestionario previo a la lección

Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderás sobre arreglos y bucles, que se utilizan para manipular datos.

🎥 Haz clic en las imágenes de arriba para ver videos sobre arreglos y bucles.

¡Puedes tomar esta lección en Microsoft Learn!

Arreglos

Trabajar con datos es una tarea común en cualquier lenguaje, y es mucho más fácil cuando los datos están organizados en un formato estructurado, como los arreglos. Con los arreglos, los datos se almacenan en una estructura similar a una lista. Una gran ventaja de los arreglos es que puedes almacenar diferentes tipos de datos en un solo arreglo.

✅ ¡Los arreglos están en todas partes! ¿Puedes pensar en un ejemplo de la vida real de un arreglo, como un conjunto de paneles solares?

La sintaxis para un arreglo es un par de corchetes.

let myArray = [];

Este es un arreglo vacío, pero los arreglos pueden declararse ya poblados con datos. Los valores múltiples en un arreglo están separados por una coma.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Los valores del arreglo tienen un valor único llamado índice, un número entero que se asigna según su distancia desde el inicio del arreglo. En el ejemplo anterior, el valor de cadena "Chocolate" tiene un índice de 0, y el índice de "Rocky Road" es 4. Usa el índice con corchetes para recuperar, cambiar o insertar valores en el arreglo.

✅ ¿Te sorprende que los arreglos comiencen en el índice cero? En algunos lenguajes de programación, los índices comienzan en 1. Hay una historia interesante al respecto, que puedes leer en Wikipedia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Puedes usar el índice para cambiar un valor, así:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

Y puedes insertar un nuevo valor en un índice dado de esta manera:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Una forma más común de agregar valores a un arreglo es utilizando operadores de arreglos como array.push()

Para saber cuántos elementos hay en un arreglo, usa la propiedad length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ ¡Pruébalo tú mismo! Usa la consola de tu navegador para crear y manipular un arreglo de tu propia creación.

Bucles

Los bucles nos permiten realizar tareas repetitivas o iterativas, y pueden ahorrar mucho tiempo y código. Cada iteración puede variar en sus variables, valores y condiciones. Hay diferentes tipos de bucles en JavaScript, y todos tienen pequeñas diferencias, pero esencialmente hacen lo mismo: recorrer datos.

Bucle For

El bucle for requiere 3 partes para iterar:

contador Una variable que generalmente se inicializa con un número que cuenta el número de iteraciones.
condición Expresión que utiliza operadores de comparación para hacer que el bucle se detenga cuando sea false.
expresión de iteración Se ejecuta al final de cada iteración, generalmente se usa para cambiar el valor del contador.

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Ejecuta este código en la consola de tu navegador. ¿Qué sucede cuando haces pequeños cambios al contador, la condición o la expresión de iteración? ¿Puedes hacer que funcione al revés, creando una cuenta regresiva?

Bucle While

A diferencia de la sintaxis del bucle for, los bucles while solo requieren una condición que detendrá el bucle cuando la condición se vuelva false. Las condiciones en los bucles generalmente dependen de otros valores como contadores, y deben manejarse durante el bucle. Los valores iniciales para los contadores deben crearse fuera del bucle, y cualquier expresión para cumplir una condición, incluido el cambio del contador, debe mantenerse dentro del bucle.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ ¿Por qué elegirías un bucle for en lugar de un bucle while? 17,000 usuarios tuvieron la misma pregunta en StackOverflow, y algunas de las opiniones podrían interesarte.

Bucles y Arreglos

Los arreglos se usan a menudo con bucles porque la mayoría de las condiciones requieren la longitud del arreglo para detener el bucle, y el índice también puede ser el valor del contador.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Experimenta recorriendo un arreglo de tu propia creación en la consola de tu navegador.

🚀 Desafío

Existen otras formas de recorrer arreglos además de los bucles for y while. Hay forEach, for-of, y map. Reescribe tu bucle de arreglo utilizando una de estas técnicas.

Cuestionario posterior a la lección

Repaso y autoestudio

Los arreglos en JavaScript tienen muchos métodos asociados a ellos, que son extremadamente útiles para la manipulación de datos. Lee sobre estos métodos y prueba algunos de ellos (como push, pop, slice y splice) en un arreglo de tu creación.

Tarea

Recorrer un Arreglo

Descargo de responsabilidad:
Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

7.5 KiB Raw Permalink Blame History