Explicar las diferentes variantes del bucle for en TypeScript

Los bucles se utilizan para ejecutar un bloque de código específico un número específico de veces. Hay 2 tipos de bucles en TypeScript que son bucles definidos (for) y bucles indefinidos (while, do…while)

En TypeScript, tenemos básicamente 3 tipos de bucles for .

• por
• para .. de
• para .. en

Bucle f o: el bucle for se utiliza para ejecutar un bloque de código en particular durante un número específico de veces, que está definido por una declaración condicional específica. Este es un bucle for tradicional que hemos estado estudiando en todas partes y usando todo el tiempo.

Sintaxis:

for(Initialization; Condition; Updation) {
    ...
}

• La declaración de inicialización se ejecuta antes de que comience el ciclo e inicializa la variable de iteración en un valor particular, que se usa para terminar el ciclo después de ciertas iteraciones.
• La declaración de condición contiene la condición de terminación que define cuándo debe detenerse el ciclo. ¡Es muy importante porque una condición incorrecta puede hacer que el ciclo continúe para siempre!
• La declaración de actualización se ejecuta al final de cada iteración. Actualiza el valor de la variable de iteración. Se hace para que la variable de iteración alcance un valor que falsifique la condición de iteración y, por lo tanto, finalice el bucle.

Ejemplo: Aquí, sea i =10; es la declaración de inicialización que inicializa una variable de iteración i con un valor inicial de 10. La i < 15; es la condición que se comprueba antes de cada iteración y i++; es la declaración de actualización que incrementa la variable de iteración i en +1 después de cada iteración.

<script>
    for(let i = 10; i < 15; i++) {
  
        // This statement is repeated
        console.log(i);
    }
</script>

Producción:

Salida del código.

Ejemplo 2: en este ejemplo, crearemos una array de algunos elementos y accederemos a cada elemento de la array mediante el bucle for .

<script>
    let animals = ['cat', 'dog', 'lion', 'wolf', 'deer']
      
    for(let i = 0; i < animals.length; i++) {
  
        // Prints i-th element of the array
        console.log(animals[i]);
    }
</script>

Producción:

Se imprimen los elementos de la array.

bucle for…of: este es otro tipo de bucle for en TypeScript que funciona de una manera diferente. Opera en objetos iterables como arrays, listas, etc. Itera cada elemento del iterable y lo asigna a la variable de iteración. Entonces, no hay necesidad de escribir la forma tradicional de bucle for si queremos acceder a elementos de un iterable. En su lugar, podemos usar for..of loop.

Sintaxis:

for (initializer of collection) {
    ...
}

Ejemplo: aquí, se accede uno por uno a los elementos de la array animales y se almacenan en la variable de iteración i . Entonces, almaceno el elemento de la array en una iteración particular, por lo que no necesitamos acceder a los elementos de la array manualmente. Además, el bucle se ejecuta la misma cantidad de veces que la longitud de la array, por lo que ni siquiera tuvimos que preocuparnos por la condición de terminación. 

<script>
    let animals = ['cat', 'dog', 'lion', 'wolf', 'deer']
      
    for(let i of animals) {
  
        // Print each element of the array
        console.log(i);
    }
</script>

Producción:

Se imprimen los elementos de la array.

El ciclo for..of es útil cuando solo queremos los elementos de un iterable (arreglo, lista, tupla), y no tenemos que preocuparnos por el índice de los elementos dentro del arreglo.

bucle for…in: el bucle for..in funciona de manera similar al bucle for..of , pero en lugar de asignar los elementos de la array a la variable de iteración, se asignan los índices de los elementos, por lo que obtenemos el índice del elemento en cada iteración, que se puede usar para acceder a elementos de array individuales o realizar operaciones necesarias que requieren índice en lugar de elementos de array (por ejemplo, intercambio de dos elementos).

Sintaxis:

for (initializer in collection) {
    ...
}

Ejemplo: aquí, i es la variable de iteración, que se asigna a los índices de la array uno por uno, comenzando desde el primer índice que es 0 y yendo hasta el último índice de la array que en este caso es 4 . La condición y la actualización son gestionadas automáticamente por JavaScript.

<script>
    let animals = ['cat', 'dog', 'lion', 'wolf', 'deer']
      
    for(let i in animals) {
        // Print each element of the array
        console.log(i, animals[i]);
    }
</script>

Salida: como en el código, imprimí i y animals[i] , obtenemos el índice y el valor en ese índice en cada iteración.

Se imprime el índice y el valor en el índice.

Conclusión: Los 3 bucles for tienen sus propias ventajas. Casi todo se puede hacer usando el bucle for tradicional y universal , pero si estamos trabajando con iterables (arrays, listas, etc.), entonces usando las versiones especializadas de bucle for , es decir, for..of y for..in puede resultar en un código más limpio y menos complejo.