JS commonly used in the three judgment statements

  • In the JS code, we will have some logical judgments
    • If, else if, else
    • Ternary operator
    • switch case

If conditional judgment:

If (condition 1){// if(condition 2){else if(condition 2){// If (condition 2){// if(condition 2){else if(condition 2){// If (condition 2){// If (condition 2){else}}... If (condition){if(condition){... } if(condition){... }else{... } <=> Condition? . :... ; . Condition: the if (1) {... } the value is converted to Boolean judge true and false if (n = = 10) {} normal conditions = = = = = / = > / < = / > / < the if (n = = 1 | | m = = 2) {} conditions | more | or (a is true, the whole is true) and && (are true, If (n==1 && m==2){}Copy the code
  • A simple if-else statement applies:
let x=10; if(x>=10) { x++; } else {x--; } console.log(x);Copy the code

The results for

let x='10'; if(x==1) { x+=1; }else if(x==5){ x+=2; }else if(x==10){// if(x +=3){// if(x +=3); }else{x+=4; } console.log(x); / / = > '103'Copy the code

The result is:

Ternary operator: that handles the simplest if/else case

  • Conditions? 2. Something done when a condition is not true;
    • If you need to do more than one thing, wrap it in parentheses and separate each thing with commas.

Application examples:

let x=10; if(x>=10) { x++; } else { x--; } console.log(x); // Change to ternary operator let x=10; x >= 10 ? x++ : x-- console.log(x);Copy the code

The result is:

  • If the condition is true and you don’t want to do something, use null/undefined and so on. Otherwise, an error will be reported
let x=10; if(x==10) { x++; } console.log(x); // Change to ternary operator let x=10; x==10 ? x++ : null console.log(x);Copy the code

The result is:

Ternary operators can be nested as required

let x=10; if(x>0) { if(x<10) { x++; }else{ x--; } }else{ x--; } console.log(x); // Change to ternary operator let x=10; x>0 ? (x<10? x++:x--) : x--; console.log(x);Copy the code

The result is:

Switch case statement:

  • It can only be used to do something with a value equal to, but not with a value greater than or less than.

  • Each case ends with a break, the last default is equivalent to an else, and the last judgment ends without a break.

Switch case let x='10'; switch case let x='10'; if(x==1) { x+=1; }else if(x==5){ x+=2; }else if(x==10){// if(x +=3){// if(x +=3); }else{x+=4; } console.log(x); // switch case statement let x='10'; Case 1: switch(x) {case 1: switch(x) {case 1: switch(x) {case 1: switch(x); Case 5: x+=2; case 5: x+=2; break; case 10: x+=3; break; Default: // Is equivalent to else, and there is no need to set break-. x+=4 at the end of the last judgment; } console.log(x); //=>'104'; //=>'104';Copy the code

The result is:

JS commonly used in the three types of loop statements

  • Loop: Doing something over and over again
    • The for loop
    • The for loop in
    • The while loop
    • .

The for loop

  • Set initial value
  • Set/verify conditions for loop execution
  • The code in the body of the loop is executed
  • The next cycle is based on step size

For loop example:

for (var i = 0; i < 5; I ++) {// loop body: repeat things (code block) //console.log(I); } console.log(I); // Output 0 1 2 3 4} console.log(I); / / = > 5 when I = 5 end of the cycle, at this moment I = 5. / / I = 0 = > 0 = > 1 / / / / I = 1 I = 2 / /... // I =5Copy the code

The result is:

Var I = 10; var I = 10; var I = 10; for (; i >= 0;) { console.log(i); / / = > 10}Copy the code
// i-=2 => i=i-2 // i++ => i+=1 => i=i+1 var i = 10; for (; i >= 0; i -= 2) { console.log(i); //=> 10 8 6 4 2 0} console.log(' loop over ', I); Var I = 10; var I = 10; var I = 10; var I = 10; for (; i >= 0;) { console.log(i); i -= 2; } console.log(' end of loop ', I); When I =-2, the loop ends, and I =-2.Copy the code

The result is:

The while loop

  • While loop: We only care about conditions syntactically

    While (condition){// execute the condition}

Example of a while loop:

var i = 10; for (; i >= 0; i -= 2) { console.log(i); //=> 10 8 6 4 2 0} console.log(' loop over ', I); Var I = 10; var I = 10; while (i >= 0) { console.log(i); i -= 2; }Copy the code

The result is:

The for loop in

  • Requirement: To iterate over each item in an array or object in turn.
  • Array objects: Special objects (with an index [index starting from 0] and a length attribute) are usually traversed through arrays using a for loop (however, the for loop can only traverse each item in the numeric index, not the length attribute).
  • Array-like structure: it is not an array, but it is very similar to an array, and it can be traversed using a for loop (but the for loop can only traverse each item in the numeric index).
  • Normal objects: It cannot be traversed based on a for loop, because there is no length that represents how many groups of key-value pairs there are, nor is it like array property names that are numeric indexes… You can’t use a for loop on an object that doesn’t have an array structure.
  • Iterating over each item in a normal object can be based on a for in loop.
  • Instead of iterating over each item in an array or array-like array directly, the for loop builds a loop n times based on the length. Each loop takes the value of the variable I as the index and looks for the value of the corresponding index in the array or array-like array to get what we call the current item of the array.
  • The for in loop operates directly on the structure of the object, as many times as there are sets of key-value pairs.

Iterating over each item in a normal object can be based on a for in loop.

  • For in loop: loops as many times as there are sets of key-value pairs in the object.

    • Key: variable that stores the name of the property for the current iteration.

    • During iteration, the numeric property names are first traversed from smallest to largest.

var obj = { name: 'yunduo', age: 11, 0: 10, 2: 30 }; for (var key in obj) { //console.log(key); //=> 0 2 "name" "age" console.log(obj[key]); // obj[key]; // obj[key]; // obj[key]; // obj[key]; Obj [0] obj[2]... obj[0] obj[2]... }Copy the code

The result is:

  • Arrays and array-like arrays can iterate over each item (each item that specifies a numeric index) based on a for loop;
  • Objects can only iterate through each item based on for in; But arrays and array-like arrays are also objects and can be traversed based on for in.

An array of class

var arrayLike = { 0: 10, 1: 20, 2: 30, x: 100, y: 200, length: 3 }; for (var key in arrayLike) { console.log(key); //for loop 6 times 0 1 2 x y length} for (I = 0; i < arrayLike.length; i++) { console.log(arrayLike[i]); //for loop 3 times 10 20 30}Copy the code

The result is:

An array of

var arr = [10, 20, 30]; for (var key in arr) { console.log(key); // For in loop three times 0 1 2 // Reason: the length attribute in the array structure is built-in (and this attribute is non-enumerable: cannot be traversed by for in)}Copy the code

The result is:

Break continue keywords

  • Continue ends the current round of the loop (the code below continue is not executed in the body of the loop), and the next round continues (the step count still needs to be executed).
  • Break terminates the entire loop (in the body of the loop, the code below break is not executed, and the step accumulation is not executed)

Continue and break examples:

for (var i = 0; i < 10; i++) { if (i >= 3) { console.log(i); i += 2; continue; }else{ console.log(i); // 0 i += 3; break; } console.log(I); } console.log(i); / / 3Copy the code

The result is:

for (var i = 0; i < 10; i++) { if (i >= 3) { console.log(i); // 3 6 9 i += 2; continue; } if (i >= 6) { console.log(i); i += 3; break; } console.log(i); // 0 1 2 } console.log(i); / / 12Copy the code

The result is: