JavaScript determines if/else statements

if (条件 1)
  {
  当条件 1 为 true 时执行的代码;
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码;
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码;
  }

JavaScript uses if () { ... } else { ... } to perform conditional judgment. For example, to display different content based on age, you can use the if statement to implement the following:

var age = 20;
if (age >= 18) { // 如果age >= 18为true，则执行if语句块
    alert('adult');
} else { // 否则执行else语句块
    alert('teenager');
}

The else statement is optional. If the statement block contains only one statement, you can omit {}:

var age = 20;
if (age >= 18)
    alert('adult');
else
    alert('teenager');

The danger of omitting {} is that if you later want to add some statements but forget to write {}, you will change the if.. The semantics of .else..., for example:

var age = 20;
if (age >= 18)
    alert('adult');
else
    console.log('age < 18'); // 添加一行日志
    alert('teenager'); // <- 这行语句已经不在else的控制范围了

The else clause of the above code is actually only responsible for executing console.log('age < 18');, the original alert('teenager') ; is no longer within the control scope of if...else..., it will be executed every time.

On the contrary, a statement with {} will not go wrong:

var age = 20;
if (age >= 18) {
    alert('adult');
} else {
    console.log('age < 18');
    alert('teenager');
}

This is why we recommend always writing {}.

Multi-line conditional judgment

If you want to judge the conditions more carefully, you can use a combination of multiple if...else...:

var age = 3;
if (age >= 18) {
    alert('adult');
} else if (age >= 6) {
    alert('teenager');
} else {
    alert('kid');
}

The above combination of multiple if...else...is actually equivalent to two layers of if...else...:

var age = 3;
if (age >= 18) {
    alert('adult');
} else {
    if (age >= 6) {
        alert('teenager');
    } else {
        alert('kid');
    }

But we usually write else if together , to increase readability. There is no problem if the else here omits {}, because it only contains an if statement. Note that the last separate else should not be omitted {}.

Please note that the execution feature of if...else... statements is to choose one of the two. In multiple if...else... statements, if a certain condition is true, the subsequent No more judgment.

Try to explain why the following code displays teenager:

'use strict';
var age = 20;
if (age >= 6) {
    alert('teenager');
} else if (age >= 18) {
    alert('adult');
} else {
    alert('kid');
}

Since the value of age is 20, it actually satisfies the conditions age >= 6 and age >= 18 at the same time. This It is very important to explain the order of conditional judgments. Please fix it so that it can display adult.

What if the result of the if conditional judgment statement is not true or false? For example:

var s = '123';
if (s.length) { // 条件计算结果为3
    //
}

JavaScript treats null, undefined, 0, NaN and the empty string'' as false, and all other values ​​as true, so the result of the conditional judgment of the above code is true.