前端开发——JavaScript的条件语句

世界不仅有黑，又或者白

世界而是一道精致的灰

** ——Lungcen**

条件判断语句

if 语句

 **   if 语句是条件判断语句中最简单的一个条件判断语句，它只有当条件表达式成立的时候才会执行{ }中的代码内容。**

    <script >
        var age = 20;
        if(age >= 18)
        { 
            alert("你已经成年");
        }
    </script>

if else 语句

    if 语句的升级版，在 if 语句中只有成立的时候才会执行一个条件，但是在日常生活中，不仅仅只有一面。就像这个世界不仅仅是黑，也不仅仅是白。

    **if else 语句不仅可以指定当表达式成立时要执行的代码，还可以指定当表达式不成立时要执行的代码**

    <script >
        var age = 20;
        if(age >= 18)
        {
            alert("成年人");
        }else
        {
            alert("未成年人");
        }
    </script>

if else if else 语句

    if 和 if else 语句都只有一个条件表达式，而 if else if else 语句是它们更高级的形式，**在 if else if else 语句中允许定义多个条件表达式，并根据表达式的结果执行相应的代码。**

if (条件表达式 1) {
    // 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
    // 条件表达式 2 为真时执行的代码
}
...
  else if (条件表达式N) {
    // 条件表达式 N 为真时执行的代码
} else {
    // 所有条件表达式都为假时要执行的代码
}

    <script >
        var now = new Date();
        var dayOfWeek = now.getDay(); 
        if(dayOfWeek == 0) {           
            alert("星期日")
        } else if(dayOfWeek == 1) {
            alert("星期一")
        } else if(dayOfWeek == 2) {
            alert("星期二")
        } else if(dayOfWeek == 3) {
            alert("星期三")
        } else if(dayOfWeek == 4) {
            alert("星期四")
        } else if(dayOfWeek == 5) {
            alert("星期五")
        } else {
            alert("星期六")
        }
    </script>

switch语句

    **switch语句可以根据不同的条件来执行不同的代码**，这个效果和if esle语句的多分支结构有点类似。但是与 if else 多分支结构相比，**switch case 语句更加简洁和紧凑，执行效率更高。**

switch (表达式){
    case value1:
        statements1  // 当表达式的结果等于 value1 时，则执行该代码
        break;
    case value2:
        statements2  // 当表达式的结果等于 value2 时，则执行该代码
        break;
    ......
    case valueN:
        statementsN  // 当表达式的结果等于 valueN 时，则执行该代码
        break;
    default :
        statements  // 如果没有与表达式相同的值，则执行该代码
}

switch 语句根据表达式的值，依次与 case 子句中的值进行比较：

• 如果两者相等，则执行其后的语句段，当遇到 break 关键字时则跳出整个 switch 语句。
• 如果不相等，则继续匹配下一个 case。
• switch 语句包含一个可选的 default 关键字，如果在前面的 case 中没有找到相等的条件，则执行 default 后面的语句段。

break 关键字

    switch 语句是逐行执行的，当 switch 语句找到一个与之匹配的 case 子句时，不仅会执行该子句对应的代码，还会继续向后执行，直至 switch 语句结束。

  **  为了防止这种情况产生，需要在每个 case 子句的末尾使用 break 来跳出 switch 语句。break 除了可以用来跳出 switch 语句外，还可以用来跳出循环语句（for、for in、while、do while ）**

case 子句

   ** case 子句可以省略语句，这样当匹配时，不管下一个 case 条件是否满足，都会继续执行下一个 case 子句的语句。**

** 在 switch 语句中，case 子句只是指明了执行起点，但是没有指明执行的终点。****如果在 case 子句中没有 break 语句，就会发生连续执行的情况，从而忽略后面 case 子句的条件限制，这样就容易破坏 switch 结构的逻辑。 **

** 所以说在函数中使用 switch 语句，需要使用 return 语句（或者break语句）终止 switch 语句，防止代码继续执行。**

default语句

   ** default 是 switch 子句，可以位于 switch 内任意位置，不会影响多重分支正常执行**

default 语句与 case 语句简单比较如下：

• 语义不同：default 为默认项，case 为判例。
• 功能扩展：default 选项是唯一的，不可以扩展。而 case 选项是可扩展的，没有限制。
• 异常处理：default 与 case 扮演的角色不同，case 用于枚举，default 用于异常处理。

while循环语句

while 循环在每次循环之前，会先对条件表达式进行求值：

    如果条件表达式的结果为 true，则执行

{ }

中的代码

    如果条件表达式的结果为 false，则退出 while 循环，执行 while 循环之后的代码。

var i=1;
var sum=0;
while (i <= 100){
    sum += i;
    i++;
}

    在编写循环语句时，**一定要确保条件表达式的结果能够为假（即布尔值 false）**，因为只要表达式的结果为 true，循环会一直持续下去，不会自动停止，对于这种无法自动停止的循环，我们通常将其称为“**无限循环”或“死循环”。**

do while循环语句

do while 循环与 while 循环非常相似，不同之处在于：

** do while 循环会先执行循环中的代码，然后再对条件表达式进行判断。因此，无论条件表达式是真还是假，do while 循环都能至少执行一次，而 **while 循环就不一样，如果条件表达式为假会直接退出 while 循环。

do {
    // 需要执行的代码
} while (条件表达式);

**需要注意的是：do while 循环与 while 循环还有一点不同，那就是 do while 循环的末尾需要使用分号

;

进行结尾，而 while 循环则不需要**

for循环语句

for 循环 和 switch语句一样，适合在已知循环次数时使用

while循坏 和 do while循坏，就适合不知道循坏数的时候使用

for(initialization; condition; increment) {
    // 要执行的代码
}

for 循环中包含三个可选的表达式 initialization、condition 和 increment，其中：

• initialization：为一个表达式或者变量声明，我们通常将该步骤称为“初始化计数器变量”，在循环过程中只会执行一次；
• condition：为一个条件表达式，与 while 循环中的条件表达式功能相同，通常用来与计数器的值进行比较，以确定是否进行循环，通过该表达式可以设置循环的次数；
• increment：为一个表达式，用来在每次循环结束后更新（递增或递减）计数器的值。

for 循环中的三个表达式

** for 循环中括号中的三个表达式是可以省略的，但是用于分隔三个表达式的分号不能省略**

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}

// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}

// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}

// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

for 循环嵌套

和if else语句一样，无论是哪种循环，都可以嵌套使用（即在一个循环中再定义一个或多个循环）

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

for 循环变体——for in

    for in 循环是一种特殊类型的循环，也是普通 for 循环的变体，主要用来遍历对象，使用它可以将**对象中的属性**依次循环出来**（注意循坏对象是——>对象）**

for (variable in object) {
  // 要执行的代码
}

    variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在

{ }

中使用这个变量来进行一系列操作；

    object 为要遍历的对象，在每次循环中，会将 object 对象中的一个属性的键赋值给变量 variable，直到对象中的所有属性都遍历完。

// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};

// 遍历对象中的所有属性
for(var prop in person) {
    document.write("<p>" + prop + " = " + person[prop] + "</p>");
}

** for in 循环是为遍历对象而创建的，虽然也可以遍历数组，但是并不推荐，若要遍历数组，可以使用 for循环或者 for of循环。**

for 循环变体——for of

    for of 循环是 ECMAScript6 中新添加的一个循环方式，与 for in 循环类似，也是普通 for 循环的一种变体，使用 **for of 循环可以轻松的遍历数组或者其它可遍历的对象****（注意对象是——>数值或者可遍历对象）**

for (variable of iterable) {
    // 要执行的代码
}

    variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在后面的

{ }

中使用这个变量来进行一系列操作；

    iterable 为要遍历的内容，在每次循环中，会将 iterable 中的一个值赋值给变量 variable，直到 iterable 中的所有值都遍历完。

// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
    document.write(value + ", ");
}
document.write("<br>");

// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
    document.write(value + ", ");
}
document.write("<br>");

// 定义一个对象
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for in 循环遍历对象中的所有属性
for(var value in obj) {
    document.write(value + ", ");
}

虽然 for of 循环也可以遍历对象，但并不推荐，若要遍历对象可以使用 for in 循环。

break 语句 和 continue 语句

    break 语句前面已经简单了解过了 break 语句，使用 break 语句可以跳出 switch 语句。其实使用 **break 语句还可以用来跳出循环。**

    **continue 语句用来跳过本次循环，执行下次循环**。当遇到 continue 语句时，程序会立即重新检测条件表达式，如果表达式结果为真则开始下次循环，如果表达式结果为假则退出循环。

JavaScript 标签

    JavaScript 中的标签与 HTML 中的标签不同，**JavaScript 中的标签就是一个标识符（类似变量名），后面跟随一个冒号 

: 

**。

    JavaScript 标签可以声明在任何语句或者代码块之前，并与 break 或 continue 配合来跳出特定的循环，例如当多个循环嵌套使用时，单纯使用 break 只能跳出当前的循环，无法跳出外层循环，如果**将 break 与标签配合使用，则可以一次跳出多层循环****。**

outerloop:          // 定义一个标签    
for (var i = 0; i < 5; i++) {
   document.write("外层循环: " + i + "<br />");
   innerloop:       // 定义一个标签
   for (var j = 0; j < 5; j++) {
      if (j > 3 ) break ;           // 跳出内层循环
      if (i == 2) break innerloop;  // 跳出内层讯息
      if (i == 4) break outerloop;  // 跳出外层循环
      document.write("内层循环: " + j + " <br />");
   }
}      
document.write("循环结束!<br /> ");

注意：1、break 或 continue 与标签之间不能出现换行

** 2、标签名称和相关循环之间不能出现其它代码。**

世界不仅有黑，又或者白

世界而是一道精致的灰

** ——Lungcen**