Declarações de repetição em TypeScript
Este artigo explica as declarações de repetição em TypeScript.
YouTube Video
A declaração for no TypeScript
A declaração for no TypeScript é uma estrutura de loop básica para realizar operações repetidas. Em um loop for, o mesmo bloco de código pode ser executado repetidamente com base em um número de vezes ou condições especificadas.
Sintaxe Básica
1for (initialization; condition; update) {
2 // Code to execute repeatedly while the condition is true
3}- inicialização*: Esta é a parte que é executada apenas uma vez antes de iniciar o loop. Inicializar variáveis como contadores de loop.
- Condições (condição)*: Determina se o loop continua. Se for verdade, continue a loop, e se false, saia.
- Update (
update): Execute no final de cada loop e atualize o contador de loop.
Exemplo 1: Loop básico for
No exemplo abaixo, ele exibe os números de 0 a 4 em ordem.
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
Exemplo 2: Loop for com um array
Você também pode usar um loop for para processar os elementos de um array em ordem.
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
Exemplo 3: Loop for-in
O loop for-in é usado para iterar sobre as propriedades de um objeto ou os índices de um array em ordem.
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
Exemplo 4: Loop for-of
O loop for-of é usado para obter o valor de cada elemento em ordem a partir de objetos iteráveis como arrays ou strings.
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
Exemplo 5: Loop for Aninhado
Também é possível usar um loop for dentro de outro loop for, conhecido como um loop aninhado. Isso permite criar loops duplos, entre outras coisas.
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
Resumo
- A instrução
forrealiza processamento repetitivo baseado em contagens ou condições especificadas. for-iné usado para recuperar as propriedades de um objeto ou os índices de um array.for-ofrecupera os valores dos elementos de objetos iteráveis como arrays.- Processamento repetitivo complexo também é possível com loops
foraninhados.
A declaração for no TypeScript oferece um processamento repetitivo poderoso e flexível, semelhante a outros loops.
Declarações While no TypeScript
Em TypeScript, uma declaração while é uma estrutura de loop que executa um processo repetitivo enquanto a condição especificada for true. Semelhante ao loop for, o loop while é adequado para casos em que o número de iterações não está predefinido ou quando você deseja controlar a repetição com base em uma condição.
Sintaxe Básica
1while (condition) {
2 // Code to execute repeatedly while the condition is true
3}- Condição: A condição sob a qual o loop é executado. O loop continua enquanto essa condição for
truee para quando se tornarfalse.
Exemplo 1: Loop básico while
No exemplo abaixo, ele continua exibindo o valor de i enquanto i for 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
Neste exemplo, o loop termina quando i se torna 5 ou maior porque a condição se torna false.
Exemplo 2: Exemplo de Loop Infinito
Se a condição em um loop while for sempre true, ele pode se tornar um loop infinito. Isso geralmente faz com que o programa não pare como esperado, por isso é necessário cuidado.
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
Você pode usar a declaração break para sair forçosamente do loop quando uma condição for atendida.
Exemplo 3: Loop do-while
O loop do-while é uma estrutura onde o processo de repetição é executado pelo menos uma vez. Como a condição é avaliada após o processo, o processo é executado pelo menos uma vez, mesmo que a condição seja 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
Neste exemplo, j é 5 desde o início, e j < 5 é false, mas em um loop do-while, ele é executado pelo menos uma vez, independentemente da condição.
Resumo
- Um loop
whilerepete o processamento enquanto a condição fortrue. - Se a condição de término do loop não for clara, é necessário ter cuidado com loops infinitos.
- Um loop
do-whiledifere de um loopwhilenormal, pois o processamento é executado pelo menos uma vez.
A declaração while em TypeScript é útil para processamentos em loop com contagens de iteração incertas ou quando a verificação de condições dinâmicas é necessária.
break e continue
Você pode usar break e continue dentro dos laços.
breaké usado para encerrar um laço prematuramente.continueé usado para pular a iteração atual e passar para a próxima iteração.
Exemplo 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
Neste caso, break é executado quando i se torna 5. Como resultado, os números de 0 a 4 são exibidos.
Exemplo 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
Neste caso, continue é executado quando i é 2. Como resultado, os números, exceto 2, são exibidos.
Laços aninhados em TypeScript
Um laço aninhado é uma estrutura onde um laço é usado dentro de outro laço. Em TypeScript, são suportados construtos de laços como for, while e do-while. Ao usar laços aninhados, você pode processar arrays bidimensionais (matrizes) e simplificar o processamento com base em várias condições.
Sintaxe Básica
A sintaxe básica de um laço aninhado é a seguinte.
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}Para cada execução do laço externo, o laço interno completa todas as suas iterações. Essa estrutura é muito útil ao lidar com vários laços ou estruturas de dados.
Exemplo de um laço aninhado em TypeScript
Percorrendo um array bidimensional
Os laços aninhados são frequentemente usados ao manipular estruturas de dados multidimensionais, como arrays bidimensionais. No exemplo a seguir, os elementos de um array bidimensional são percorridos, e seus valores são exibidos no console.
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
Neste exemplo, estamos percorrendo o array bidimensional matrix. O loop externo lida com as linhas, e o loop interno lida com as colunas, exibindo cada elemento em ordem.
Combinação de dois arrays
A seguir, apresentamos um exemplo de cálculo de todas as combinações de dois arrays. Por exemplo, você pode pegar um elemento de cada um dos dois arrays e exibir todos os pares possíveis.
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)
Neste exemplo, todos os pares entre o array de strings array1 e o array de números array2 são criados. O loop externo extrai elementos de array1, e o loop interno extrai elementos de array2, exibindo cada par.
Gerando coordenadas com um loop triplo
Usando loops aninhados triplos, você pode gerar coordenadas em um espaço tridimensional, por exemplo.
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)
Dessa forma, o uso de loops aninhados triplos permite gerar coordenadas em um espaço tridimensional com facilidade.
Desempenho de loops aninhados
Loops aninhados são convenientes, mas o custo computacional aumenta rapidamente à medida que a profundidade dos loops cresce. Por exemplo, se houver n iterações do loop externo e m iterações do loop interno, o número total de iterações será n * m. Quando isso é ainda mais aninhado, a complexidade computacional aumenta exponencialmente, podendo afetar o desempenho do programa.
Abaixo estão as complexidades computacionais ao percorrer três arrays.
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}Nesse caso, você precisa calcular array1.length * array2.length * array3.length, resultando em 3 * 3 * 3 = 27 iterações para processar todas as combinações.
Otimização de loops aninhados
Ao usar loops aninhados, você pode melhorar o desempenho considerando as seguintes otimizações.
- Introduza saídas antecipadas: Saia do loop mais cedo quando o objetivo for alcançado para evitar iterações desnecessárias.
- Armazene variáveis do loop em cache: Armazene em cache os valores das variáveis usadas dentro do loop (especialmente comprimentos e intervalos) para reduzir o custo de cálculo a cada vez.
- Altere as estruturas de dados: Revisar a estrutura de arrays e objetos pode ser eficaz para acelerar processos repetitivos específicos.
Conclusão
Loops aninhados são uma ferramenta poderosa no processamento de dados complexos e algoritmos. No entanto, à medida que a profundidade do loop e o número de iterações aumentam, podem surgir problemas de desempenho. Com otimizações apropriadas e um design cuidadoso, você pode usar eficazmente loops aninhados no TypeScript.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.