Declaraciones de repetición en TypeScript
Este artículo explica las declaraciones de repetición en TypeScript.
YouTube Video
La declaración for en TypeScript
La declaración for en TypeScript es una estructura básica de bucle para realizar operaciones repetitivas. En un bucle for, el mismo bloque de código se puede ejecutar repetidamente basado en un número de veces o condiciones especificados.
Sintaxis Básica
1for (initialization; condition; update) {
2 // Code to execute repeatedly while the condition is true
3}- inicialización: Esta es la parte que se ejecuta sólo una vez antes de comenzar el bucle. Inicializar variables como contadores de bucle.
- Conditions (
condition): Determina si el bucle continúa. Si es verdad, sigue hundiendo, y si es falso, salir. - Actualización ( " actualización " ): Correr al final de cada bucle y actualizar el contador de bucle.
Ejemplo 1: Bucle básico for
En el ejemplo a continuación, imprime los números del 0 al 4 en orden.
1for (let i = 0; i < 5; i++) {
2 console.log("The value of i is: " + i);
3}
4// Outputs:
5// The value of i is: 0
6// The value of i is: 1
7// The value of i is: 2
8// The value of i is: 3
9// The value of i is: 4
Ejemplo 2: Bucle for con un arreglo
También puedes usar un bucle for para procesar los elementos de un arreglo en orden.
1let fruits: string[] = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log("Fruit: " + fruits[i]);
5}
6// Outputs:
7// Fruit: apple
8// Fruit: banana
9// Fruit: cherry
Ejemplo 3: Bucle for-in
El bucle for-in se usa para iterar sobre las propiedades de un objeto o los índices de un arreglo en orden.
1let car = { brand: "Toyota", model: "Corolla", year: 2020 };
2
3for (let key in car) {
4 console.log(key + ": " + car[key]);
5}
6// Outputs:
7// brand: Toyota
8// model: Corolla
9// year: 2020
Ejemplo 4: Bucle for-of
El bucle for-of se usa para obtener el valor de cada elemento en orden de objetos iterables como arreglos o cadenas.
1let colors: string[] = ["red", "green", "blue"];
2
3for (let color of colors) {
4 console.log("Color: " + color);
5}
6// Outputs:
7// Color: red
8// Color: green
9// Color: blue
Ejemplo 5: Bucle for Anidado
También es posible usar un bucle for dentro de otro bucle for, conocido como bucle anidado. Esto te permite crear bucles dobles, entre otras cosas.
1for (let i = 0; i < 3; i++) {
2 console.log("Outer loop i: " + i);
3 for (let j = 0; j < 2; j++) {
4 console.log(" Inner loop j: " + j);
5 }
6}
7// Outputs:
8// Outer loop i: 0
9// Inner loop j: 0
10// Inner loop j: 1
11// Outer loop i: 1
12// Inner loop j: 0
13// Inner loop j: 1
14// Outer loop i: 2
15// Inner loop j: 0
16// Inner loop j: 1
Resumen
- La declaración
forrealiza un procesamiento repetitivo basado en recuentos o condiciones especificados. for-inse usa para recuperar las propiedades de un objeto o los índices de un arreglo.for-ofrecupera los valores de los elementos de objetos iterables como arreglos.- El procesamiento repetitivo complejo también es posible con bucles
foranidados.
La declaración for en TypeScript proporciona un procesamiento repetitivo poderoso y flexible, similar a otros bucles.
Declaraciones While en TypeScript
En TypeScript, una declaración while es una construcción de bucle que ejecuta un proceso repetitivo mientras la condición especificada es true. Similar al bucle for, el bucle while es adecuado para casos en los que el número de iteraciones no está predeterminado o cuando deseas controlar la repetición basada en una condición.
Sintaxis Básica
1while (condition) {
2 // Code to execute repeatedly while the condition is true
3}- Condición: La condición bajo la cual se ejecuta el bucle. El bucle continúa mientras esta condición sea
true, y se detiene cuando se vuelvefalse.
Ejemplo 1: Bucle básico while
En el ejemplo a continuación, continúa imprimiendo el valor de i mientras i sea menor que 5.
1let i: number = 0;
2
3while (i < 5) {
4 console.log("The value of i is: " + i);
5 i++;
6}
7// Outputs:
8// The value of i is: 0
9// The value of i is: 1
10// The value of i is: 2
11// The value of i is: 3
12// The value of i is: 4
En este ejemplo, el bucle termina cuando i alcanza 5 o más porque la condición se vuelve false.
Ejemplo 2: Ejemplo de bucle infinito
Si la condición en un bucle while siempre es true, puede convertirse en un bucle infinito. Esto generalmente hace que el programa no se detenga como se esperaba, por lo que se necesita precaución.
1let x: number = 0;
2
3while (true) {
4 console.log("The value of x is: " + x);
5 x++;
6 if (x >= 5) {
7 break; // Exit the loop when the condition is met
8 }
9}
10// Outputs:
11// The value of x is: 0
12// The value of x is: 1
13// The value of x is: 2
14// The value of x is: 3
15// The value of x is: 4
Puedes usar la declaración break para salir del bucle forzosamente cuando se cumple una condición.
Ejemplo 3: Bucle do-while
El bucle do-while es una estructura en la que el proceso del bucle se ejecuta al menos una vez. Dado que la condición se evalúa después del proceso, el proceso se ejecuta al menos una vez incluso si la condición es false.
1let j: number = 5;
2
3do {
4 console.log("The value of j is: " + j);
5 j++;
6} while (j < 5);
7// Outputs: The value of j is: 5
En este ejemplo, j es 5 desde el inicio, y j < 5 es false, pero en un bucle do-while, se ejecuta al menos una vez independientemente de la condición.
Resumen
- Un bucle
whilerepite el procesamiento mientras la condición seatrue. - Si la condición de finalización del bucle no está clara, debes tener cuidado con los bucles infinitos.
- Un bucle
do-whilese diferencia de un buclewhilenormal en que el procesamiento se ejecuta al menos una vez.
La declaración while en TypeScript es útil para el procesamiento de bucles con un número de iteraciones incierto o cuando es necesario verificar condiciones dinámicas.
break y continue
Puedes usar break y continue dentro de los bucles.
breakse usa para finalizar un bucle prematuramente.continuese usa para omitir la iteración actual y pasar a la siguiente iteración.
Ejemplo de break
1for (let i = 0; i < 10; i++) {
2 if (i === 5) {
3 break; // Exits the loop when i is 5
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 2, 3, 4
8
9let i = 0;
10
11while (i < 10) {
12 if (i === 5) {
13 break; // Ends the loop when i is 5
14 }
15 console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4
En este caso, break se ejecuta cuando i vale 5. Como resultado, se muestran los números del 0 al 4.
Ejemplo de continue
1for (let i = 0; i < 5; i++) {
2 if (i === 2) {
3 continue; // Skips when i is 2
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 3, 4
8
9let i = 0;
10
11while (i < 5) {
12 i++;
13 if (i === 3) {
14 continue; // Skips when i is 3
15 }
16 console.log(i);
17}
18// Outputs 1, 2, 4, 5
En este caso, continue se ejecuta cuando i es 2. Como resultado, se muestran los números excepto el 2.
Bucles anidados en TypeScript
Un bucle anidado es una estructura donde un bucle se utiliza dentro de otro bucle. En TypeScript, se admiten construcciones de bucles como for, while y do-while. Mediante el uso de bucles anidados, puedes procesar matrices bidimensionales y optimizar el procesamiento basado en múltiples condiciones.
Sintaxis Básica
La sintaxis básica de un bucle anidado es la siguiente.
1for (let i: number = 0; i < n; i++) {
2 for (let j: number = 0; j < m; j++) {
3 // Processing for the inner loop
4 }
5}Por cada ejecución del bucle exterior, el bucle interior completa todas sus iteraciones. Esta estructura es muy útil al manejar múltiples bucles o estructuras de datos.
Ejemplo de un bucle anidado en TypeScript
Recorriendo una matriz bidimensional
Los bucles anidados se usan a menudo al manipular estructuras de datos multidimensionales como matrices bidimensionales. En el siguiente ejemplo, se recorren los elementos de una matriz bidimensional y sus valores se muestran en la consola.
1const matrix: number[][] = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7for (let row: number = 0; row < matrix.length; row++) {
8 for (let col: number = 0; col < matrix[row].length; col++) {
9 console.log(`matrix[${row}][${col}] = ${matrix[row][col]}`);
10 }
11}
12// Output
13// matrix[0][0] = 1
14// matrix[0][1] = 2
15// matrix[0][2] = 3
16// matrix[1][0] = 4
17// matrix[1][1] = 5
18// matrix[1][2] = 6
19// matrix[2][0] = 7
20// matrix[2][1] = 8
21// matrix[2][2] = 9
En este ejemplo, estamos recorriendo el arreglo bidimensional matrix. El bucle externo gestiona las filas y el bucle interno gestiona las columnas, mostrando cada elemento en orden.
Combinación de dos arreglos
A continuación, presentamos un ejemplo de cómo calcular todas las combinaciones de dos arreglos. Por ejemplo, puedes tomar un elemento de cada uno de los dos arreglos y mostrar todos los pares posibles.
1const array1: string[] = ['A', 'B', 'C'];
2const array2: number[] = [1, 2, 3];
3
4for (let i: number = 0; i < array1.length; i++) {
5 for (let j: number = 0; j < array2.length; j++) {
6 console.log(`Pair: (${array1[i]}, ${array2[j]})`);
7 }
8}
9// Output
10// Pair: (A, 1)
11// Pair: (A, 2)
12// Pair: (A, 3)
13// Pair: (B, 1)
14// Pair: (B, 2)
15// Pair: (B, 3)
16// Pair: (C, 1)
17// Pair: (C, 2)
18// Pair: (C, 3)
En este ejemplo, se crean todos los pares entre el arreglo de cadenas array1 y el arreglo de números array2. El bucle externo extrae elementos de array1, y el bucle interno extrae elementos de array2, mostrando cada par.
Generación de coordenadas con un triple bucle
Por ejemplo, usando bucles anidados triples, puedes generar coordenadas en un espacio tridimensional.
1for (let x: number = 0; x < 3; x++) {
2 for (let y: number = 0; y < 3; y++) {
3 for (let z: number = 0; z < 3; z++) {
4 console.log(`Coordinate: (${x}, ${y}, ${z})`);
5 }
6 }
7}
8// Output
9// Coordinate: (0, 0, 0)
10// Coordinate: (0, 0, 1)
11// Coordinate: (0, 0, 2)
12// ...
13// Coordinate: (2, 2, 1)
14// Coordinate: (2, 2, 2)
De esta manera, el uso de bucles anidados triples te permite generar fácilmente coordenadas en un espacio tridimensional.
Rendimiento de los bucles anidados
Los bucles anidados son convenientes, pero el costo computacional aumenta rápidamente a medida que aumenta la profundidad de los bucles. Por ejemplo, si hay n iteraciones del bucle externo y m iteraciones del bucle interno, el número total de iteraciones será n * m. Cuando esto se anida aún más, la complejidad computacional aumenta exponencialmente, lo que podría afectar el rendimiento del programa.
A continuación, se muestran las complejidades computacionales al recorrer tres arreglos.
1const array1: number[] = [1, 2, 3];
2const array2: number[] = [4, 5, 6];
3const array3: number[] = [7, 8, 9];
4
5for (let i: number = 0; i < array1.length; i++) {
6 for (let j: number = 0; j < array2.length; j++) {
7 for (let k: number = 0; k < array3.length; k++) {
8 console.log(`Combination: (${array1[i]}, ${array2[j]}, ${array3[k]})`);
9 }
10 }
11}En este caso, necesitas calcular array1.length * array2.length * array3.length, lo que da como resultado 3 * 3 * 3 = 27 iteraciones para procesar todas las combinaciones.
Optimización de bucles anidados
Al usar bucles anidados, puedes mejorar el rendimiento considerando las siguientes optimizaciones.
- Introducir salidas tempranas: Sal del bucle tan pronto como se alcance el objetivo para evitar iteraciones innecesarias.
- Guardar en caché las variables del bucle: Pre-almacena los valores de las variables usadas dentro del bucle (especialmente longitudes y rangos) para reducir el costo de cálculo en cada iteración.
- Cambiar las estructuras de datos: Revisar la estructura de arreglos y objetos puede ser eficaz para acelerar procesos repetitivos específicos.
Conclusión
Los bucles anidados son una herramienta poderosa en el procesamiento de datos complejos y algoritmos. Sin embargo, a medida que aumenta la profundidad del bucle y el número de iteraciones, pueden surgir problemas de rendimiento. Con optimizaciones adecuadas y un diseño cuidadoso, puedes aprovechar eficazmente los bucles anidados en TypeScript.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.