前端开发——JavaScript的条件语句-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端开发——JavaScript的条件语句。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

世界不仅有黑，又或者白

世界而是一道精致的灰

——Lungcen文章来源地址https://www.toymoban.com/news/detail-419969.html

条件判断语句

if 语句

if else 语句

if else if else 语句

switch语句

break 关键字

case 子句

default语句

while循环语句

do while循环语句

for循环语句

for 循环中的三个表达式

for 循环嵌套

for 循环变体——for in

for 循环变体——for of

break 语句和 continue 语句

JavaScript 标签

条件判断语句

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、标签名称和相关循环之间不能出现其它代码。