El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

El ciclo for JavaScript

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
El ciclo for es uno de los más loops más usados. Conoce las principales secciones de las que se compone y aprende la estructura y pasos que debes de seguir para iterar ordenadamente en tus colecciones de datos.
05:40

Transcripción

Los ciclos son estructuras de control bastante sofisticadas, de hecho, nos sirven para estar repitiendo acciones. Nosotros podemos tener distintos tipos de ciclos, pero también a lo largo de todos los lenguajes de programación los podrás encontrar con distintos nombres como ciclos, "loops" o iteradores. De hecho, los ciclos son la manera ideal de estar repitiendo un conjunto de acciones. En este contexto, cada vez que tú tienes una repetición lo podemos conocer como una iteración. Así, nosotros podemos tener identificados dos tipos de ciclos: los ciclos definidos y los ciclos indefinidos. Donde con los ciclos definidos sabemos cuántas veces se va a ejecutar, al contrario, con los ciclos indefinidos no sabemos cuántas veces se va a ejecutar. Un ejemplo de los ciclos definidos son el ciclo'for' y de ciclos indefinidos son los ciclos'while'y'do while'. Veamos ahora cómo vamos a trabajar con un ciclo'for'. En este caso tenemos una variable de'productos' que tiene un valor 5 y lo que vamos a hacer es mostrar en pantalla cada vez que estamos iterando sobre el'producto'. Así que primero comencemos trabajando con nuestro código. Aquí ya tenemos preparado un ejemplo de un ciclo'for', que es un ciclo definido. En este caso, primero tenemos que utilizar la palabra reservada'for', después podemos darnos cuenta de que esto se divide en tres partes y aquí nosotros podemos entender cuáles son los componentes de un ciclo'for', que son: contador, condición o evaluación, y el paso que puede ser un incrementador o un decrementador. En el caso del contador, simplemente es el elemento que nos va a servir de base para poder estar haciendo las repeticiones o iteraciones. Después, la siguiente parte es la condición, en la cual nosotros vamos a preguntar en qué estado nos encontramos para saber si continuamos o no continuamos con la iteración. Y después de esto vamos a modificar el contador con un paso, es decir, yo puedo ir agregando o eliminando elementos para poder realizar la evaluación de una manera correcta. Y lo que tenemos aquí entre estas llaves es el conjunto de acciones que vamos a estar repitiendo, en este caso vamos a estar repitiendo este conjunto de acciones cinco veces, porque esto se va a ejecutar mientras que el contador sea menor que lo que hay en'productos', es decir, menor que 5. Pero, para poder entender esto, vamos a utilizar una opción de nuestro navegador llamada de'debugger'. El'debugger'me va a permitir a mí trabajar directamente en el navegador y estar revisando qué sucede en cada paso y así podemos entender de una mejor manera. Para esto puedes escribir la palabra'debugger' y vamos a ejecutarla directamente en nuestro navegador. Una vez que ejecutamos, nuestras ventanas se ponen de alguna manera diferente, así que no te preocupes, lo primero que vamos a hacer será reorganizar esta parte para que veamos qué está sucediendo. La parte clave que vamos a utilizar aquí será esta sección llamada Watch, así que todas las demás las puedes contraer sin ningún problema. Vamos a modificar un poquito los tamaños en pantalla y, ahora sí, vamos a trabajar con este botón que aparece de este lado para ir trabajando en cada iteración. Vamos a abrir la opción que dice Watch. Si, por alguna razón, tienes algún elemento aquí colócate encima de él y pulsa en el guión para eliminarlo. Si no tienes nada no te preocupes, ahora es cuando vamos a agregarlo. Si te das cuenta, nosotros tenemos dos elementos con los cuales estamos trabajando: 'productos'y'contador', así que vamos a agregarlos a esta parte de la expresión. Pulsamos el símbolo de más y ponemos la palabra 'productos', pulsamos nuevamente en el símbolo de más y vamos a poner ahora 'contador'. Después damos un Enter y vamos a ver que es el valor con el que están iniciando estos dos elementos. Ahora sí, vamos a pulsar en este botón, que es ir trabajando en cada uno de los pasos. Así que pulsamos nuevamente y vemos como nos estamos deteniendo aquí en la parte que dice'contador', porque ya ejecutó la primera parte, y ahora va a sumar una vez más al'contador'. El'contador'ahora vale 0. Cuando yo paso la siguiente sección, pregunta: ¿es el'contador' menor que'productos'? Y vemos que'contador'es igual a 1 y'productos'es igual a 5. Entonces, la condición se cumple, por tanto podemos continuar. Esto se repite. Y si nosotros nos vamos a la sección de la consola, en la consola podemos ver que dice'producto 0'. Regresamos a la sección que dice Sources y volvemos a repetir el paso, así cada vez que nosotros estamos haciendo el paso podemos ver en esta sección que está marcada como los valores van cambiando dependiendo de cada iteración. Incluso, si tú colocas el "mouse" encima de las variables podrás ver el valor que tiene en este momento, por lo tanto'contador'ahora tiene 2, volvemos a pulsar y volvemos a ejecutar. En este caso la condición se sigue cumpliendo, el valor va cambiando, y si nosotros regresamos a la sección de la consola podemos ver cuáles son todos los elementos que se están imprimiendo. Así nosotros podemos terminar y cuando llegamos a la última parte de iterar, en este caso'contador'vale 4, se hace el incremento de ese valor y ya vale 5. Entonces, ahora va a hacer la pregunta en la evaluación: ¿'contador' es menor que'productos'? Esto se procesa y obviamente, como esta condición que no se cumple, entonces ya puede terminar satisfactoriamente este ciclo. De esta manera nosotros hemos trabajado ya correctamente con nuestro ciclo'for'.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.