ES6 | Bucles – Barcelona Geeks

Los bucles son la forma de hacer la misma tarea una y otra vez de forma cíclica. Un bucle representa un conjunto de instrucciones que deben repetirse. En el contexto de un bucle, una repetición se denomina iteración.

La siguiente figura ilustra la clasificación de los bucles:

Definitivo: hay tres tipos de bucles definidos en ES6. Cada uno de ellos se describe a continuación con el ejemplo:

Escribe	Descripción
por( ; ; )	Ejecuta el bloque de bucle por un número específico de veces bajo una condición de terminación.
para… en	Ejecuta el bloque de bucle a través de las propiedades de un objeto.
para… de	Ejecuta el bloque de bucle para iterar el iterable en lugar de los literales de objeto.

for( ; ; ) El bucle for ejecuta el bloque de código un número específico de veces.
Sintaxis:
```
for( Initialization; Terminate Condition; Increment/Decrement )
```
La inicialización también se puede conocer como valor de conteo ya que esta variable realiza un seguimiento del conteo hasta el terminador. Incrementa/Decrementa la variable a un cierto valor de pasos. La condición de terminación determina la categoría indefinida o definida, porque si la declaración del terminador es válida, entonces el ciclo se termina en un tiempo definido, de lo contrario, se trata de ciclos infinitos y será un ciclo indefinido.
for…in El bucle for…in se utiliza para recorrer las propiedades de un objeto.
Sintaxis:
```
for(variable_name in object) {  
    . . . 
}
```
En cada iteración, se asigna una propiedad del objeto a variable_name y este ciclo continúa hasta el final de las propiedades del objeto. Ciertamente termina su iteración con seguridad, por lo que se encuentra en un ciclo definido.
for…of El bucle for…of se utiliza para ejecutar el bloque de bucle para iterar el iterable en lugar de los literales de objeto.
Sintaxis:
```
for(variable_name of object) {  
    . . .
}
```
En cada iteración, una propiedad del iterable (array, string, etc.) se asigna a variable_name y este ciclo continúa hasta el final de las iteraciones, ciertamente termina su iteración con seguridad, por lo que se encuentra en un ciclo definido.

Ejemplo: Este ejemplo ilustra los tres bucles descritos anteriormente.

<script>
function geeks() {
    var obj = {Geeks:1, on:2, one:3};
    document.write("for(;;)<br>")
  
    for( var i = 0 ; i <= 10; i+=2) {
        document.write(i+" ")
    }
  
    document.write("<br>for...of<br>")
  
    // If 'of' is replaced by 'in' it throws an error 
    // as 'in' and literal are not compatible
    for (var i of ['hello', "Geeks", 3000]) {
        document.write(i+" ") 
    }
  
    // If 'in' is replaced by 'of' it throws an error 
    // as 'of' and objects are not compatible
    document.write("<br>for...in<br>")
  
    for (var i in  obj) {
        document.write(obj[i]+" "); 
    }
}
geeks();
</script>

Producción:

for(;;)
0 2 4 6 8 10
for...of
hello Geeks 3000
for...in
1 2 3

Indefinido: hay dos tipos de bucles indefinidos en ES6. Cada uno de ellos se describe a continuación con el ejemplo:

Escribe	Descripción
tiempo	Ejecuta el bloque de bucle por un número específico de veces bajo una condición de terminación.
hacer… mientras	similar al ciclo while pero primero ejecuta el ciclo y lo evalúa.

Bucle while: este bucle se incluye en el bucle indefinido, donde puede pasar a la etapa indeterminada o infinita. Este bucle es de dos tipos.
El bucle while ejecuta las instrucciones cada vez que la condición especificada se evalúa como verdadera.
Sintaxis:
```
while (terminator condition) {  
    . . .
} 
```
do…while: El bucle do…while es similar al bucle while excepto que el bucle do…while no evalúa la condición la primera vez que se ejecuta el bucle. Ejecuta el bucle al menos una vez independientemente de la condición de terminación.
Sintaxis:
```
do {  
    . . .
} 
while (terminator condition);  
```

Ejemplo Este ejemplo ilustra los tres bucles descritos anteriormente.

<script>
function geeks() {
    var i = 1;
    document.write("while<br>");
    while(i <= 10) {
        document.write(i+" ");
        i += 2
    }
    document.write("<br>do...while<br>");
    var j = 11;
    do {
  
        // Prints j even though it is not satisfying
        // the condition because the condition is
        // not checked yet
        document.write(j + " ");
        j += 2;
    }
  
while(j <= 10); // ; is necessary
}
geeks();
</script>

Producción:
```
while
1 3 5 7 9
do...while
11
```

Declaraciones de control de bucle: para interrumpir la ejecución del flujo o para controlar el flujo de ejecución, utilizamos declaraciones de control de bucle.

Palabra clave	Descripción
descanso	La instrucción break se usa para sacar el control del ciclo.
Seguir	La declaración de continuación omite las declaraciones subsiguientes en la iteración actual y lleva el control de regreso al comienzo del ciclo.
devolver	Una declaración de retorno finaliza la ejecución de la llamada de función y «devuelve» el resultado

Ejemplo:

<script>
function geeks() {
    var i = 1;
    document.write("break<br>");
    while(i <= 10) {
        document.write(i + " ");
        if(i == 3) {
            document.write("break executed as i==3 is"
                    + " true and breaks the loop.");
            break;
        }
        i += 1;
    }
    var j = 0;
    document.write("<br>continue<br>");
    while(j <= 10) {
        j += 1;
        if(j == 4) {
            document.write("<br>continue executed as i==3"
                + " is true and skips the remaining loop "
                + "for that iteration<br>");
            continue;
        }
  
        if(j == 8)
            return;
        document.write(j + " ");
    }
}
geeks();
document.write("<br>returned to main as j==8 is true.<br>");
</script>

Producción:

break
1 2 3 break executed as i==3 is true and breaks the loop.
continue
1 2 3
continue executed as i==3 is true and and skips the remaining
loop for that iteration
5 6 7
returned to main as j==8 is true.

Etiquetas usadas para controlar el flujo: una etiqueta es simplemente un identificador seguido de dos puntos ( : ) que se aplica a una instrucción o bloque de código. Se puede usar una etiqueta con un descanso y continuar controlando el flujo con mayor precisión, pero el uso de etiquetas no se usa mucho, ya que genera problemas de complejidad de tiempo y se vuelve más complicado con más bucles internos.

Ejemplo:

<script>
function geeks() {
    outerloop:
      
    for (var i = 0; i <=3; i++) { 
        document.write("Outerloop: " + i); 
        innerloop: 
              
        for (var j = 0; j<=3; j++) {
              
            // Quit the innermost loop 
            if (i == 1 && j>1){
                document.write("<br>innerloop skips the"
                    + "rest of the loop as i == 1 && j>1"
                    + " outerloop still in execution")
                continue innerloop;
            }
              
            // Do the same thing 
            if (i == 2) {
                document.write(" outerloop breaks as i==2 <br>")
                break outerloop; // Quit the outer loop 
            }
            document.write("<br>Innerloop: " + j); 
        }
        document.write("<br>")
    }
}
geeks();
</script>

Producción:

Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
innerloop skips the rest of the loop as i == 1 && j>1 outerloop still in execution
innerloop skips the rest of the loop as i == 1 && j>1 outerloop still in execution
Outerloop: 2 outerloop breaks as i==2

En palabras simples, nombramos los bucles usando una etiqueta y siempre que, de acuerdo con la ejecución, podemos obtener la interrupción y la continuación de un bucle específico en cualquier lugar.

Publicación traducida automáticamente

Artículo escrito por Tejashwi5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta