TypeScript Bucles

A veces, es posible que necesitemos ejecutar el mismo bloque de código varias veces. En general, las sentencias se ejecutan en orden: la primera sentencia de una función se ejecuta primero, luego la segunda, y así sucesivamente.

Los lenguajes de programación proporcionan diversas estructuras de control que permiten rutas de ejecución más complejas.

Las sentencias de bucle nos permiten ejecutar una sentencia o un grupo de sentencias varias veces. A continuación se muestra el diagrama de flujo de las sentencias de bucle en la mayoría de los lenguajes de programación:

循环结构

Bucle for

El bucle for de TypeScript se utiliza para ejecutar una secuencia de sentencias varias veces, simplificando el código que gestiona las variables de bucle.

Sintaxis

El formato de la sintaxis es el siguiente:

for ( init; condition; increment ){
    statement(s);
}

A continuación se muestra el análisis del flujo de control del bucle for:

initSe ejecuta primero, y solo una vez. Este paso le permite declarar e inicializar cualquier variable de control del bucle. También puede no escribir ninguna sentencia aquí, siempre que aparezca un punto y coma.
A continuación, se evalúacondition. Si es true, se ejecuta el cuerpo del bucle. Si es false, no se ejecuta el cuerpo del bucle y el flujo de control salta a la siguiente sentencia después del bucle for.
Después de ejecutar el cuerpo del bucle for, el flujo de control vuelve a la sentenciaincrementanterior. Esta sentencia le permite actualizar la variable de control del bucle. Esta sentencia puede dejarse vacía, siempre que aparezca un punto y coma después de la condición.
La condición se evalúa de nuevo. Si es true, se ejecuta el bucle; este proceso se repite continuamente (cuerpo del bucle, luego incrementar el valor del paso, y luego volver a evaluar la condición). Cuando la condición se vuelve false, el bucle for termina.

Aquí, statement(s) puede ser una sentencia única o un bloque de código compuesto por varias sentencias.

condition puede ser cualquier expresión; cuando la condición es true se ejecuta el bucle, y cuando es false se sale del bucle.

Diagrama de flujo

Perl 中的 for 循环

Ejemplo

El siguiente ejemplo calcula el factorial de 5. El bucle for genera números del 5 al 1 y calcula el producto de los números en cada iteración.

TypeScript

var num:number = 5; var i:number; var factorial = 1; for(i = num;i>=1;i--) { factorial *= i; } console.log(factorial)

Al compilar el código anterior se obtiene el siguiente código JavaScript:

JavaScript

var num = 5; var i; var factorial = 1; for (i = num; i >= 1; i--) { factorial *= i; } console.log(factorial);

Al ejecutar el código JavaScript anterior, el resultado es:

Bucle for...in

La sentencia for...in se utiliza para iterar sobre una colección o lista de valores y generar su salida.

Sintaxis

El formato de la sintaxis es el siguiente:

for (var val in list) { 
    //语句 
}

val debe ser de tipo string o any.

Ejemplo

TypeScript

var j:any; var n:any = "a b c" for(j in n) { console.log(n[j]) }

Al compilar el código anterior se obtiene el siguiente código JavaScript:

JavaScript

var j; var n = "a b c"; for (j in n) { console.log(n[j]); }

Al ejecutar el código JavaScript anterior, el resultado es:

a

b

c

Bucles for…of, forEach, every y some

Además, TypeScript también admite los bucles for…of, forEach, every y some.

La sentencia for...of crea un bucle para iterar sobre objetos iterables. El bucle for...of, introducido en ES6, reemplaza a for...in y forEach(), y admite el nuevo protocolo de iteración. for...of te permite recorrer estructuras de datos iterables como Arrays, Strings, Maps, Sets, etc.

Bucle TypeScript for...of

let someArray = [1, "string", false]; for (let entry of someArray) { console.log(entry); // 1, "string", false }

forEach, every y some son sintaxis de bucle de JavaScript. TypeScript, como superconjunto sintáctico de JavaScript, por supuesto también las admite de forma predeterminada.

Debido a que forEach no puede retornar en la iteración, se pueden usar every y some para reemplazar a forEach.

Bucle TypeScript forEach

let list = [4, 5, 6]; list.forEach((val, idx, array) => { //val: valor actual //idx: índice actual // array: Array });

Bucle TypeScript every

let list = [4, 5, 6]; list.every((val, idx, array) => { //val: valor actual //idx: índice actual // array: Array return true; // Continues // Return false will quit the iteration });

Bucle while

La sentencia while repite la ejecución de una sentencia o grupo de sentencias mientras la condición dada sea true. El cuerpo del bucle se ejecuta después de probar la condición.

Sintaxis

El formato de la sintaxis es el siguiente:

while(condition)
{
   statement(s);
}

Aquí, statement(s) puede ser una sentencia única o un bloque de código compuesto por varias sentencias.

condition puede ser cualquier expresión; cuando la condición es true se ejecuta el bucle. Cuando la condición es false, el flujo del programa saldrá del bucle.

Diagrama de flujo

En el diagrama,whileEl punto clave del bucle es que puede que no se ejecute ni una sola vez. Cuando la condición es false, se omite el cuerpo del bucle y se ejecuta directamente la siguiente sentencia después del bucle while.

Ejemplo

TypeScript

var num:number = 5; var factorial:number = 1; while(num >=1) { factorial = factorial * num; num--; } console.log("El factorial de 5 es:"+factorial);

Al compilar el código anterior se obtiene el siguiente código JavaScript:

JavaScript

var num = 5; var factorial = 1; while (num >= 1) { factorial = factorial * num; num--; } console.log("El factorial de 5 es:" + factorial);

Al ejecutar el código JavaScript anterior, el resultado es:

5 的阶乘为：120

Bucle do...while

A diferencia deforywhilelos bucles for/while, que prueban la condición del bucle al comienzo del bucle.do...whileEl bucle do...while comprueba su condición al final del bucle.

Sintaxis

El formato de la sintaxis es el siguiente:

do
{
   statement(s);
}while( condition );

Tenga en cuenta que la expresión de condición aparece al final del bucle, por lo que statement(s) dentro del bucle se ejecutará al menos una vez antes de que se pruebe la condición.

Si la condición es true, el flujo de control vuelve al do anterior y vuelve a ejecutar statement(s) dentro del bucle. Este proceso se repite continuamente hasta que la condición dada se vuelve false.

Diagrama de flujo

Perl 中的 do...while 循环

Ejemplo

TypeScript

var n:number = 10; do { console.log(n); n--; } while(n>=0);

Al compilar el código anterior se obtiene el siguiente código JavaScript:

JavaScript

var num = 5; var n = 10; do { console.log(n); n--; } while (n >= 0);

Al ejecutar el código JavaScript anterior, el resultado es:

Sentencia break

breakLa sentencia tiene los dos usos siguientes:

CuandobreakCuando la sentencia aparece dentro de un bucle, el bucle termina inmediatamente y el flujo del programa continúa con la siguiente sentencia después del bucle.
También se puede utilizar para terminarswitchun case dentro de la sentencia.

Si está utilizando bucles anidados (es decir, un bucle dentro de otro), la sentencia break detiene la ejecución del bucle más interno y luego comienza a ejecutar la siguiente línea de código después de ese bloque.

Sintaxis

El formato de la sintaxis es el siguiente:

break;

Diagrama de flujo

Ejemplo

TypeScript

var i:number = 1 while(i<=10) { if (i % 5 == 0) { console.log ("El primer número divisible por 5 entre 1 y 10 es:"+i) break //Salir del bucle después de encontrar uno } i++ } //Imprime 5 y luego el programa termina

Al compilar el código anterior se obtiene el siguiente código JavaScript:

JavaScript

var i = 1; while (i <= 10) { if (i % 5 == 0) { console.log("El primer número divisible por 5 entre 1 y 10 es:" + i); break; //Salir del bucle después de encontrar uno } i++; } //Imprime 5 y luego el programa termina

Al ejecutar el código JavaScript anterior, el resultado es:

在 1~10 之间第一个被 5 整除的数为 : 5

Sentencia continue

continueLa sentencia es algo similar a labreaksentencia break. Pero no es una terminación forzada; continue omite el código del bucle actual y fuerza el inicio de la siguiente iteración del bucle.

Paraforel bucle for,continuedespués de ejecutar la sentencia continue, la sentencia de incremento aún se ejecutará. Parawhileydo...whileel bucle while,continuela sentencia continue vuelve a ejecutar la sentencia de evaluación de la condición.

Sintaxis

El formato de la sintaxis es el siguiente:

continue;

Diagrama de flujo

C continue 语句

Ejemplo

TypeScript

var num:number = 0 var count:number = 0; for(num=0;num<=20;num++) { if (num % 2==0) { continue } count++ } console.log ("El número de impares entre 0 y 20 es:"+count) //Imprimir 10 números pares

Al compilar el código anterior se obtiene el siguiente código JavaScript:

JavaScript

var num = 0; var count = 0; for (num = 0; num <= 20; num++) { if (num % 2 == 0) { continue; } count++; } console.log("La cantidad de impares entre 0 y 20 es:" + count); //Salida: 10

Al ejecutar el código JavaScript anterior, el resultado es:

0 ~20 之间的奇数个数为: 10

Bucle infinito

Un bucle infinito es un bucle que se ejecuta continuamente sin detenerse. Tanto los bucles for como while pueden crear bucles infinitos.

Sintaxis para crear un bucle infinito con for:

for(;;) { 
   // 语句
}

Ejemplo

for(;;) { 
   console.log("这段代码会不停的执行") 
}

Sintaxis para crear un bucle infinito con while:

while(true) { 
   // 语句
}

Ejemplo

while(true) { 
   console.log("这段代码会不停的执行") 
}

Otras extensiones

Fundamentos del sistema de tipos

Avanzado

TypeScript Bucles

Bucle for

Sintaxis

Diagrama de flujo

Ejemplo

TypeScript

JavaScript

Bucle for...in

Sintaxis

Ejemplo

TypeScript

JavaScript

Bucles for…of, forEach, every y some

Bucle TypeScript for...of

Bucle TypeScript forEach

Bucle TypeScript every

Bucle while

Sintaxis

Diagrama de flujo

Ejemplo

TypeScript

JavaScript

Bucle do...while

Sintaxis

Diagrama de flujo

Ejemplo

TypeScript

JavaScript

Sentencia break

Sintaxis

Diagrama de flujo

Ejemplo

TypeScript

JavaScript

Sentencia continue

Sintaxis

Diagrama de flujo

Ejemplo

TypeScript

JavaScript

Bucle infinito