TypeScript loop statement

In this section, we learn about loops. What is a loop? It can be seen from the literal meaning that the code is executed multiple times.

TypeScript in for circulation and for...in use cycle on and JavaScript the same. In addition, TypeScript also supports for…of , forEach , every and some cycles.

for loop

for loop in the TypeScript language can be used to execute a code block multiple times. For example, a sentence of code is repeatedly executed 10 times, 100 times, 1000 times, etc., all of which can be realized by looping.

The syntax is as follows:

for ( init; condition; increment ){
    // 代码块
}

Among them, init is the loop control variable, which will be executed at the beginning of the loop and only once. condition is a loop condition. When the condition is true , the code block in the loop will be executed, and false , the loop will stop. increment used to update the loop control variable. When the code block in the loop is executed, the control flow will jump back to this statement.

Example:

Cycle output numbers 0 to 4:

let num:number = 5;
let i:number;
for (i = 0; i < num; i++){
    console.log(i);
}

Compile into JavaScript code:

var num = 5;
var i;
for (i = 0; i < num; i++) {
    console.log(i);
}

Output:

0
1
2
3
4

Let's take a look at the execution process of the above code:

• First of all, the code in the program is executed from top to bottom, so these two lines of code will be executed before the loop starts to execute:

let num:number = 5;
let i:number;

• Then see the loop part, the first to be executed is i = 0 , initialize the loop control variables, and then judge the given loop condition i < num , if this condition is met, the code block in the loop is executed. 0 is output at this time, which is the first cycle.
• Then start the second loop, the control flow will jump back to the i++ statement part, this statement is used to update the loop control variable, so at this time the value of i plus 1 . After knowing that i is 1, the loop condition is judged again. At this time, i < num still satisfied, so continue to execute the code block in the loop and output 1 , which is the second loop.
• Then, just like the steps above, continue the third, fourth... etc. cycle. Until the loop condition i < num not met, the loop will end.

for...in loop

for...in is another variant of the for loop. The for...in statement can be used to iteratively output a set or list of values.

The syntax format is as follows:

for (var val in list) { 
    //代码块
}

val data type string or any type.

Example:

For example, we declare an array, and then use the for...in loop to traverse the array:

let myArr:string[] = ['a', 'b', 'c', 'd'];
let i:string;
for (i in myArr){
    console.log(myArr[i]);
}

Compiled into JavaScript code:

var myArr = ['a', 'b', 'c', 'd'];
var i;
for (i in myArr) {
    console.log(myArr[i]);
}

Output:

a
b
c
d

for...of loop

ES6 is introduced in for...of to replace for...in and forEach() . for...of statement creates a loop to iterate over an iterable object. It can be used to traverse string, array, map, collection and other iterable data structures.

Example:

Use for...of statement to traverse the array:

let myArr:string[] = ['a', 'b', 'c', 'd'];
let i;
for (i of myArr){
    console.log(i);
}

Compiled into JavaScript code:

var myArr = ['a', 'b', 'c', 'd'];
var i;
for (var _i = 0, myArr_1 = myArr; _i < myArr_1.length; _i++) {
    i = myArr_1[_i];
    console.log(i);
}

Output:

a
b
c
d

forEach loop

forEach() method is an array method used to perform a function on each item in the array.

The syntax is as follows:

array.forEach(callback[, thisObject]);  

forEach() method executes the provided callback once for each element in the array in ascending order. callback callback function is a function for testing each element. It accepts three optional parameters. The first parameter is the element value value , the second parameter is the element index index , and the third parameter is Array , which is one in forEach() The array to be iterated in the method. thisObject is the object used when executing the callback.

Example:

Loop an array:

let username:string[] = ['杨过', '黄蓉', '郭靖', '梅超风'];
username.forEach(function(item){
    console.log(item);
});

Compile into JavaScript code:

var username = ['杨过', '黄蓉', '郭靖', '梅超风'];
username.forEach(function (item) {
    console.log(item);
});

Output:

杨过
黄蓉
郭靖
梅超风

forEach() is actually a disadvantage of using the 0614cde6382fd2 method, that is, it does not provide a method to stop or interrupt the loop, and it is only valid for arrays. So we can use every and some instead of forEach loop.

every loop

every() method tests whether all elements in the array pass the test implemented by the provided function. If each element in the array satisfies the provided test function, it returns true. Otherwise, it returns false.

The syntax is as follows:

array.every(callback[, thisObject]);

every() syntax and methods forEach() the like, wherein callback is a callback function, thisObject as this object is callback.

Example:

let numArr:number[] = [1, 2, 3, 4, 5];

let result = numArr.every(function compare(element, index, array) { 
    return (element < 10); 
});        
console.log(result);

Compile to JavaScript code:

var numArr = [1, 2, 3, 4, 5];
var result = numArr.every(function compare(element, index, array) {
    return (element < 10);
});
console.log(result);

Output:

true

In the above code, because each element in the numArr compare , the return result is true.

some loop

some() method is used to test whether certain elements in the array pass the test implemented by the provided function.

some() method every() method, but there are some differences between the two. The some() method traverses each item in the array, and if one of the items is true, the return value is true. every() method needs to be all true for the result to be true.

Example:

let numArr:number[] = [7, 10, 15, 21];

let result = numArr.some(function compare(element, index, array) { 
    return (element < 10); 
});        
console.log(result);

Compile into JavaScript code:

var numArr = [7, 10, 15, 21];
var result = numArr.some(function compare(element, index, array) {
    return (element < 10);
});
console.log(result);

Output:

true

In the above code, as long as any element in the numArr compare , the result return value will be true . Obviously, there is an element 7 in the array that satisfies the condition of being less than 10, so the final code output result is true .

while loop

while statement meets the specified loop condition, the code block in the loop will be executed repeatedly. The test condition will be executed before the main body of the loop is executed. If the condition is not met at the beginning, the loop will not be executed.

Syntax format:

while(condition)
{
   // 代码块
}

Example:

Cycle output numbers 1 to 5:

var num:number = 1; 
while(num <= 5) { 
    console.log(num);
    num++; 
} 

Compile into JavaScript code:

var num = 1;
while (num <= 5) {
    console.log(num);
    num++;
}

Output:

1
2
3
4
5

while specified loop conditions are in parentheses after 0614cde63833a6. When looping for the first time, num is 1 at the beginning, which satisfies num <= 5 , outputs num , and then executes num++ . At this time, the value of num Then continue the second loop, 2 less than 5, so the loop condition is met, and the code block in the loop is executed... Then until num <= 5 not established, the loop ends.

do...while loop

do...while cycle is different from the while cycle and the for for and while cycles test the cycle conditions at the head of the cycle, and the do...while cycle checks the conditions at the end of the cycle. And the do...while loop will be executed at least once before the condition is tested.

The syntax format is as follows:

do{
   // 代码块
}while( condition );

Example:

var num:number = 1; 
do { 
    console.log(num); 
    num++; 
} while(num == 5);

Compile into JavaScript code:

var num = 1;
do {
    console.log(num);
    num++;
} while (num == 5);

Output:

1

Let’s take a look at the above code. In the above do...while loop, the loop condition we give is num == 5 , but at this time the value of num is 1, which obviously does not satisfy the condition, but we can see from the output that the loop is executed once. This is what do...while loop unique, that is, the loop will be executed at least once even if the conditions are not met.

Summarize

Regarding loops, we are still for loop and while loop, so under what circumstances should we use these two loops?

• It is generally known that the use of the number of executions chooses to use the for cycle, and the while can be used when the number of cycles is uncertain.
• Can be used according to specific needs of these two cycles, it can give priority to for cycle, because under normal circumstances for high cycle efficiency.