Explicación de los bucles de JavaScript: For Loop, While Loop, Do ... while Loop y más

Programación

Los bucles se utilizan en JavaScript para realizar tareas repetidas según una condición. Las condiciones suelen volver trueo falsecuando se analizan. Un bucle seguirá funcionando hasta que vuelva la condición definida false.

Los tres tipos de bucles más comunes son

  • para
  • mientras
  • hacer mientras

Puede escribir js for, js whileo js do whilepara obtener más información sobre cualquiera de estos. Veámoslos, y algunas variaciones, con más detalle ahora.

en bucle

Sintaxis

for ([initialization]); [condition]; [final-expression]) { // statement }

La fordeclaración de javascript consta de tres expresiones y una declaración:

Descripción

  • initialization: se ejecuta antes de la primera ejecución en el bucle. Esta expresión se usa comúnmente para crear contadores. Las variables creadas aquí tienen como alcance el bucle. Una vez que el ciclo ha terminado su ejecución, se destruyen.
  • condición: expresión que se comprueba antes de la ejecución de cada iteración. Si se omite, esta expresión se evalúa como verdadera. Si se evalúa como verdadero, se ejecuta la declaración del ciclo. Si se evalúa como falso, el ciclo se detiene.
  • expresión-final: expresión que se ejecuta después de cada iteración. Usualmente se usa para incrementar un contador. Pero también se puede usar para disminuir un contador.
  • declaración - Código que se repetirá en el ciclo

se puede omitir cualquiera de estas tres expresiones o la declaración. Los bucles for se utilizan comúnmente para contar un cierto número de iteraciones para repetir una declaración. Utilice una breakdeclaración para salir del ciclo antes de que la expresión de condición se evalúe como falsa.

Errores comunes

Exceder los límites de una matriz

Al indexar sobre una matriz muchas veces, es fácil exceder los límites de la matriz (por ejemplo, intente hacer referencia al cuarto elemento de una matriz de 3 elementos).

 // This will cause an error. // The bounds of the array will be exceeded. var arr = [ 1, 2, 3 ]; for (var i = 0; i <= arr.length; i++) { console.log(arr[i]); } output: 1 2 3 undefined

Hay dos formas de corregir este código. Establezca la condición en i < arr.lengthoi <= arr.length - 1

Ejemplos

Iterar números enteros del 0 al 8

for (var i = 0; i < 9; i++) { console.log(i); } output: 0 1 2 3 4 5 6 7 8

Salir de un bucle antes de que la expresión de la condición sea falsa

for (var elephant = 1; elephant < 10; elephant+=2) { if (elephant === 7) { break; } console.info('elephant is ' + elephant); } output: elephant is 1 elephant is 3 elephant is 5

para ... en bucle

La for...indeclaración itera sobre las propiedades enumerables de un objeto, en orden arbitrario. Para cada propiedad distinta, se pueden ejecutar declaraciones.

for (variable in object) { ... }

Required / OptionalParameterDescriptionRequiredVariable Se asigna un nombre de propiedad diferente a la variable en cada iteración.OptionalObjectObject cuyas propiedades enumerables se iteran.

Ejemplos

// Initialize object. a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" } // Iterate over the properties. var s = "" for (var key in a) { s += key + ": " + a[key]; s += "
"; } document.write (s); // Output: // a: Athens // b: Belgrade // c: Cairo // Initialize the array. var arr = new Array("zero", "one", "two"); // Add a few expando properties to the array. arr["orange"] = "fruit"; arr["carrot"] = "vegetable"; // Iterate over the properties and elements. var s = ""; for (var key in arr) { s += key + ": " + arr[key]; s += "
"; } document.write (s); // Output: // 0: zero // 1: one // 2: two // orange: fruit // carrot: vegetable // Efficient way of getting an object's keys using an expression within the for-in loop's conditions var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0; for (myKeys[i++] in myObj); document.write(myKeys); //Output: // a // b // c

para ... de bucle

La for...ofdeclaración crea un bucle que itera sobre objetos iterables (incluidos Array, Map, Set, objeto Arguments, etc.), invocando un gancho de iteración personalizado con declaraciones que se ejecutarán para el valor de cada propiedad distinta.

 for (variable of object) { statement }

Descripciónvariable En cada iteración, se asigna un valor de una propiedad diferente a variable.objectObject cuyas propiedades enumerables se iteran.

Ejemplos

Formación

 let arr = [ "fred", "tom", "bob" ]; for (let i of arr) { console.log(i); } // Output: // fred // tom // bob

Mapa

 var m = new Map(); m.set(1, "black"); m.set(2, "red"); for (var n of m) { console.log(n); } // Output: // 1,black // 2,red

Conjunto

 var s = new Set(); s.add(1); s.add("red"); for (var n of s) { console.log(n); } // Output: // 1 // red

Objeto de argumentos

 // your browser must support for..of loop // and let-scoped variables in for loops function displayArgumentsObject() { for (let n of arguments) { console.log(n); } } displayArgumentsObject(1, 'red'); // Output: // 1 // red

while loop

El ciclo while comienza evaluando la condición. Si la condición es verdadera, la declaración o declaraciones se ejecutan. Si la condición es falsa, las declaraciones no se ejecutan. Después de eso, el ciclo while termina.

Here is the syntax for while loop:

Syntax:

while (condition) { statement(s); }

statement(s): A statement that is executed as long as the condition evaluates to true.

condition: Here, condition is a Boolean expression which is evaluated before each pass through the loop. If this condition evaluates to true, statement(s) is/are executed. When condition evaluates to false, execution continues with the statement after the while loop.

Example:

 var i = 1; while (i < 10) { console.log(i); i++; // i=i+1 same thing } Output: 1 2 3 4 5 6 7 8 9

How to Iterate with JavaScript While Loops

While loops will run as long as the condition inside the ( ) is true. Example:

while(condition){ code... }

Hint 1:

Use a iterator variable such as i in your condition

var i = 0; while(i <= 4){ }

Spoiler Alert Solution Ahead!

Solution:

// Setup var myArray = []; // Only change code below this line. var i = 0; while (i <= 4){ myArray.push(i); i++; }

Do...while loop

The do...while loop is closely related to while loop. In the do while loop, the condition is checked at the end of the loop.

Here is the syntax for do...while loop:

Syntax:

 do { *Statement(s);* } while (*condition*);

statement(s): A statement that is executed at least once before the condition or Boolean expression is evaluated and is re-executed each time the condition evaluates to true.

condition: Here, a condition is a Boolean expression. If Boolean expression evaluates to true, the statement is executed again. When Boolean expression evaluates to false, the loops ends.

Example:

var i = 0; do { i = i + 1; console.log(i); } while (i < 5); Output: 1 2 3 4 5

How to Iterate with JavaScript Do…While Loops

  • Do...While loops makes sure that the code is executed at least once, and after the execution, if the condition inside the while() is true, it continues with the loop, otherwise it stop.

Solution:

var myArray = []; var i = 10; do { myArray.push(i); i++; } while(i <= 10);