Xiaobai must see! Large collection of loop statements in JS

Abstract: JavaScript, a total of several loop statements are provided to developers, namely while loop, do...while loop, for loop, for each, for...in loop and for...of loop.

This article is shared from the HUAWEI CLOUD community " JS Central Loop Statement Collection丨[WEB Front End Battle] ", the original author: hwJw19.

In JavaScript, developers are provided with several loop statements, namely while loop, do...while loop, for loop, for Each, for...in loop and for...of loop.

Below we will use this article to carefully distinguish the differences in the use of each cycle.

while loop

grammar:

while (expr){

       statement

}

expr is a conditional expression. When expr is true, the statement statement is executed. After the execution is complete, it enters the next loop again, until the conditional expression is false, then it jumps out of the loop.

Code example:

var n = 1;  //声明并初始化循环变量
while(n <= 100){  //循环条件
    n++;  //递增循环变量
    if (n % 2 == 0) document.write(n + "");   //执行循环操作
}

do...while loop

grammar:

do{
    statement
} while(expr)

The do...while loop is very similar to the while loop. The difference is that the while loop is first judged and then executed, while the do...while loop will execute the statement first, and then start the judgment loop. Regardless of whether the condition is true or false, it will be executed once.

Code example:

var text = "" var i = 0; 
do { 
text += "<br>数字为 " + i; i++; 
} while (i < 5); 
document.getElementById("demo").innerHTML = text;

for loop

grammar:

for (expr 1; expr 2; expr 3)
{
    statement 
}

The for loop must be a kind of loop that everyone is familiar with. The main user of the for loop loops through a certain number of code blocks. The conditions in the parentheses are the conditions of the for loop, and the curly brackets are what needs to be executed when the loop condition is true. Statement. The disadvantage is that the writing is more troublesome.

Sample code:

for (var i=0; i<5; i++) { 
x=x + "该数字为 " + i + "<br>"; 
}

forEach loop

grammar:

array.forEach(function(currentValue, index, arr), thisValue)

Because the for loop is cumbersome, the array provides a built-in forEach method. The parameter currentValue in the syntax is required, and other parameters are optional. The problem with the forEach statement is that it cannot break out of the forEach loop halfway, and neither the break command nor the return command will work.

Code example:

var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    console.log(item);
});

for...in loop

grammar:

for (var in object) {
statement 
} 

The for...in loop is mainly used to loop through the object, and you can get the key name of the object, but for...in is not suitable for traversing the array, mainly for the following reasons:

1. The keys of the array are numbers, but the ..in loop uses strings as the key names "0", "1", "2", and so on.
2. The ..in loop not only traverses the numeric key names, but also traverses other keys manually added, even including the keys on the prototype chain.
3. In some cases, the ..in loop will iterate through the key names in any order.

Code example:

var person = {fname:"John", lname:"Doe", age:32}; 
 
var text = "";
var x;
for (x in person) {
    text += person[x] + " ";
}

for...of loop

grammar:

for (variable of iterable) {
 //要执行的语句 
}

The for...of loop is a unified method that can traverse all data structures. The range it can use includes arrays, Set and Map structures, some array-like objects (such as arguments object, DOM NodeList object), and the following Generator objects, and strings. What is read is the key value of the traversal object. Advantages of for...of loop:

1. It has the same concise syntax as for...in, but without the disadvantages of for...in.
2. Unlike the forEach method, it can be used in conjunction with break, continue, and return.
3. Provides a unified interface for traversing all data structures.

Code example:

const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
}

Regarding the related content of the JS loop grammar, that's it. Welcome to the message area to communicate, criticize and correct.

Click to follow, and get to know the fresh technology of