Looping methods and various traversal methods in js

for loop

1. For has three expressions: ① declare loop variables; ② determine loop conditions; ③ update loop variables; the three expressions are separated by ;.

The three expressions in the for loop can be omitted, but the two ";" are indispensable.

2. The execution characteristics of the for loop: judge first and then execute, the same as while

3. The three expressions of the for loop can be composed of multiple parts. The multiple judgment conditions in the second part are connected with && ||, and the first and third parts are separated by commas;

for(var num = 1;num<10;num++){
               console.log(num); //1,2,3,4,5,6,7,8,9
              }

While Loop

The expression in the while loop () can have various calculation results, but they will eventually be converted to true or false. The conversion rules are as follows.

①Boolean: true is true, false is false;
②String: Empty string is false, all non-empty strings are true;
③Number: 0 is false, all non-zero numbers are true;
④null/Undefined/NaN: all false;
⑤Object: All are true.

var num = 1; //1. Declare loop variable while (num<10) { //2. Determine loop condition;
    console.log(num); //3. Execute loop operation;
    num++; //4. Update loop variables;
}

do-while loop

While loop features: judge first and then execute;

Features of the do-while loop: execute first and then judge. Even if the initial condition is not met, the do-while loop is executed at least once, which means that the do-while loop is executed one more time than the while loop.

var num = 10;
            
do{
    console.log(num); // 10 9 8 7 6 5 4 3 2 1 0
    num--;
    }while(num>=0);
            
   console.log(num);//-1

Nesting of loops

The outer loop controls rows. The inner loop controls columns. Nested loops: solving multi-row and multi-column structures

for(var j=1;j<9;j++){
        for(var i=0;i<j+1;i++){
            document.write("*");
        }
        document.write("<br>");
    }

Traversal Methods

for - in

The for - in statement is used to loop over the properties of an array or object.

Each time the code in the for - in loop is executed, the properties of the array or object are operated on.

let obj={'name':'programmer','age':'22','height':'180'};
for(let i in obj){
    console.log(i,obj[i])
}

for - of

The scope of the for...of loop includes arrays, Set and Map structures, some array-like objects (such as arguments objects, DOM NodeList objects), the Generator object described later, and strings.

The original for-in loop in JavaScript can only obtain the key name of the object, but cannot directly obtain the key value. ES6 provides a for...of loop, which allows traversal to obtain key values

Array operations:

 var arr = ['a', 'b', 'c', 'd'];

        for (let a in arr) {
          console.log(a); // 0 1 2 3
        }
        
        for (let a of arr) {
          console.log(a); // abcd
        }

Array-like object operations:

        // string var str = "hello";
        
        for (let s of str) {
          console.log(s); // hello
        }
        
        // DOM NodeList object let paras = document.querySelectorAll("p");
        
        for (let p of paras) {
          p.classList.add("test");
        }
        
        // arguments object function printArgs() {
          for (let x of arguments) {
            console.log(x);
          }
        }
        printArgs('a', 'b'); // 'a' 'b'

Loop Control Statements

1. break: jump out of the current loop and continue to execute the statements after the loop.
If the loop has multiple layers, break can only jump out of one layer.
2. continue: Skip the remaining code of this loop and continue to execute the next loop.
① For the for loop, the statement executed after continue is the loop variable update statement i++;
②For while and do-while loops, the statement executed after continue is the loop condition judgment;
Therefore, when using these two loops, continue must be used after i++, otherwise continue will skip i++ and enter an infinite loop.

 for(var i=0;i<10;i++){
        if(i == 5){
            break;
        }
        console.log(i); //0,1,2,3,4
    }

    for(var i=0;i<10;i++){
        if(i == 5){
            continue;
        }
        console.log(i); //0,1,2,3,4,6,7,8,9
    }

This is the end of this article about loop methods and various traversal methods in js. For more relevant js loop methods and traversal content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!