JavaScript Essentials: cómo entender los bucles

Supongamos que desea ejecutar una función, bounceBall, cuatro veces. ¿Como lo harias? ¿Me gusta esto?

función bounceBall () {
  // rebota la pelota aquí
}
bounceBall ()
bounceBall ()
bounceBall ()
bounceBall ()

Este enfoque es excelente si necesita bounceBall solo unas pocas veces. ¿Qué sucede si necesitas hacer rebotar la pelota cien veces?

La mejor manera es a través de un bucle for.

El bucle "para"

El bucle for ejecuta un bloque de código tantas veces como desee. Aquí hay un bucle for que ejecuta bounceBall diez veces:

para (sea i = 0; i <10; i ++) {
  bounceBall ()
}

Se divide en cuatro partes: la expresión inicial, la condición, la expresión incremental y la declaración:

for (initialExpression; condición; incrementExpression) {
  declaración
}

Antes de realizar un bucle, debe tener una declaración. Esta declaración es el bloque de código que le gustaría ejecutar varias veces. Puede escribir cualquier número de líneas de código aquí. Incluso puedes usar funciones.

Así es como se ve el ciclo for con bounceBall como su declaración:

for (initialExpression; condición; incrementExpression) {
  bounceBall ()
}

A continuación, necesita una expresión inicial para comenzar un ciclo. Aquí es donde declaras una variable. Para la mayoría de los bucles, esta variable se llama i. También se establece en 0.

Así es como se verá cuando coloque la expresión inicial en el bucle for:

for (let i = 0; condición; incrementExpression) {
  bounceBall ()
}

Después de que se ejecuta la instrucción, la variable, i aumenta o disminuye. Aumenta o disminuye el valor de i en la expresión de incremento.

Para aumentar el valor de i en uno, reasigne i de modo que se convierta en i + 1 con i = i + 1. La abreviatura de esta reasignación es i ++, que es lo que encontrará en la mayoría de los bucles.

Para disminuir el valor de i en uno, reasigne i de modo que se convierta en i - 1 con i = i - 1. La abreviatura de esta reasignación es i--, que es otra variación de lo que encontrará en la mayoría de los bucles. .

En el ejemplo anterior de bounceBall, aumentamos la variable i en uno cada vez que se ejecuta el código:

for (let i = 0; condición; i ++) {
  bounceBall ()
}

¿Pero debería aumentar o disminuir i?

La respuesta está en la condición. Esta declaración de condición se evalúa como verdadera o falsa. Si la declaración se evalúa como verdadera, se ejecuta la declaración.

Cuando se ejecuta la instrucción, JavaScript ejecuta la expresión de incremento y comprueba si la condición se evalúa como verdadera nuevamente. Repite este proceso hasta que la condición se evalúe como falsa.

Una vez que la condición se evalúa como falsa, JavaScript omite el bucle y continúa con el resto de su código.

Entonces, si no desea que se ejecute el bucle, puede establecer una condición que se evalúe como falsa inmediatamente:

// Este bucle no se ejecutará ya que la condición se evalúa como falsa
para (sea i = 0; i <0; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('La pelota ha rebotado' + vecesBounced + 'veces')
}
// Solo verás esto
console.log ('siguiente línea de código')

Si desea que el ciclo se ejecute dos veces, cambie la condición de modo que se evalúe como falso cuando la expresión de incremento se haya ejecutado dos veces.

// Este ciclo se ejecutará dos veces
para (sea i = 0; i <2; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('La pelota ha rebotado' + vecesBounced + 'veces') ")
}
console.log ('siguiente línea de código')

Si desea que el ciclo se ejecute diez veces, cambie la condición de modo que se evalúe como falso cuando la expresión de incremento se haya ejecutado diez veces.

// Este ciclo se ejecutará diez veces
para (sea i = 0; i <10; i ++) {
  bounceBall ()
  const timesBounced = i + 1
  console.log ('La pelota ha rebotado' + vecesBounced + 'veces') ")
}
console.log ('siguiente línea de código')

Bucles infinitos

Los bucles infinitos se producen cuando la condición de los bucles for siempre devuelve verdadero. Su navegador se bloqueará si ejecuta un bucle infinito.

Para recuperarse de un bucle infinito, debe salir de su navegador a la fuerza. En una Mac, esto significa que hace clic derecho en el icono de su navegador y selecciona "forzar el cierre". En la máquina de Windows, abre el Administrador de tareas de Windows con ctrl + alt + del, selecciona su navegador y hace clic en "Finalizar tarea".

Recorriendo los arrays

En la práctica, casi nunca escribe un bucle que se ejecute diez veces como en el ejemplo anterior de bounceBall. Siempre recorrerá una matriz o un objeto.

Cuando realiza un bucle (o itera) a través de una matriz, recorre cada elemento de la matriz una vez. Para hacerlo, puede usar la longitud o la matriz como condición:

const fruitBasket = ['plátano', 'pera', 'guayaba']
// fruitBasket.length es 3
for (let i = 0; i 
// => Hay una banana en la canasta
// => Hay una pera en la canasta
// => Hay una guayaba en la canasta

La forma alternativa de escribir esto para el bucle es usar una expresión de incremento negativo. Esta versión se ejecuta un poco más rápido que el ciclo for anterior, pero en su lugar realiza un bucle de la matriz desde el final.

for (let i = fruitBasket.length - 1; i> = 0; i--) {
  console.log ("Hay un" + fruitBasket [i] + "en la cesta")
}
// => Hay una guayaba en la canasta
// => Hay una pera en la canasta
// => Hay una banana en la canasta

Bucle a través de matrices con "para de"

Otra forma (mucho mejor) de recorrer una matriz es usar un for ... of loop. Esta es una nueva sintaxis de bucle que viene con ES6. Se parece a esto:

const fruitBasket = ['plátano', 'pera', 'guayaba']
para (dejar fruta de fruitBasket) {
  console.log (fruta)
}
// => Hay una banana en la canasta
// => Hay una pera en la canasta
// => Hay una guayaba en la canasta

El for ... of loop es preferible al estándar for loop porque siempre recorre la matriz una vez. No es necesario escribir array.length, lo que hace que su código sea mucho más fácil de leer y mantener.

Puede usar para ... de con cualquier objeto iterable. Estos son objetos que contienen la propiedad Symbol.iterator. Las matrices son uno de esos objetos. Si la consola registra una matriz vacía, verá que tiene el Symbol.iterator como una de sus claves (dentro de la clave Array __proto__):

Lógica en bucles

Puede usar if / else o cualquier otra lógica dentro de un bucle for.

Por ejemplo, supongamos que tiene una lista de números y desea crear una segunda lista de números que sean más pequeños que 20.

Para completar este objetivo, primero recorre los números.

números constantes = [25, 22, 12, 56, 8, 18, 34]
para (dejar número de números) {
  // haz algo aquí
}

Aquí, desea verificar si cada número es menor que 20.

números constantes = [25, 22, 12, 56, 8, 18, 34]
para (dejar número de números) {
  si (num <20) {
    // hacer algo
  }
}

Si num es menor que 20, desea agregarlo a otra matriz. Para hacerlo, utiliza el método push.

números constantes = [25, 22, 12, 56, 8, 18, 34]
dejar más pequeñoThan20 = []
para (dejar número de números) {
  si (num <20) {
    más pequeño que 20.push (num)
  }
}
// más pequeño que 20 === [12, 8, 18]

Terminando

Un bucle for se usa cuando desea ejecutar la misma tarea (o un conjunto de tareas) varias veces.

Raramente pasaría por el código exactamente diez veces. Normalmente, querrás recorrer una matriz en su lugar.

Para recorrer una matriz exactamente una vez, puede usar el for ... of loop, que es mucho más fácil de escribir y comprender en comparación con el tradicional for loop.

Recuerde, puede escribir cualquier cantidad de lógica que desee en bucles. Puede usar funciones, sentencias if / else, o incluso usar bucles en bucles.

Si te encantó este artículo, te encantará aprender Learn JavaScript, un curso que te ayuda a aprender a construir componentes reales desde cero con Javascript. Haga clic aquí para obtener más información sobre Learn JavaScript si está interesado.

(Ah, por cierto, si te gustó este artículo, te agradecería que pudieras compartirlo. )

Publicado originalmente en zellwk.com.