JavaScript中if分支语句与swich分支语句的区别

一、if分支语句

1.单分支if语句

if ( 条件 ) {
   满足条件后执行的逻辑代码 ;
}
举例说明:
用户输入年成绩,如果年龄大于 18 ,则提示恭喜你已经成年
代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let age = +prompt("请输入年龄")
        if (age >= 18) {
            alert("恭喜你成年了")
        }
    </script>
</body>

</html>

 

2.双分支if语句

if ( 条件 ) {
    满足条件后执行的逻辑代码 ;
}
else{
}
举例: 用户输入,如果工龄大于 1 年,年底奖金 +2000 , 否则年底没奖金
代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 需求一 */
        let number1 = +prompt("输入工龄")
        if (number1 > 1) {
            alert("年底奖金+2000")
        } else {
            alert("没奖金")
        }
    </script>
</body>

</html>

 

3.多分支if语句

if ( 条件 ) {
    满足条件后执行的逻辑代码 ;
}
else if( 条件){
    满足条件后执行的逻辑代码 ;
}
else if( 条件){
    满足条件后执行的逻辑代码 ;
}
举例:
需求:根据输入不同时间,输出不同的问候语
12 点以前, 输出上午好
18 点以前, 输出下午好
20 点以前, 输出晚上好
代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let time = +prompt("请输入时间")
        if (time < 12) {
            alert("上午好")
        }
        else if (12 <= time < 16) {
            alert("上午好")
        }
        else if (16 <= time < 20) {
            alert("晚上好")
        }
    </script>
</body>

</html>

 

 二、swich分支

1)语法结构

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
举例:用户在弹出框里面输入一个水果,如果有就弹出该水果的价格, 如果没有该水果就弹出 没有此水果
代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let str = prompt("输入水果")
        switch (str) {
            case "西瓜":
                alert(1)
                break;
            case "香蕉":
                alert(2)
                break;
            case "苹果":
                alert(3)
                break;
            case "橙子":
                alert(4)
                break;
            default:
                alert("无水果")
        }
    </script>
</body>

</html>

 

三、 if分支语句与swich分支语句的区别

1. 一般情况下,它们两个语句可以相互替换
2.switch...case 语句通常处理 case 为比较确定值的情况, 而 if…else… 语句更加灵活,常用于范围判断 (大于、等于某个范围 )
3.switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而 if…else 语句有几种事件就得判断多少次。
4.当分支比较少时, if… else 语句的执行效率比 switch 语句高。
5. 当分支比较多时, switch 语句的执行效率比较高,而且结构更清晰。

猜你喜欢

转载自blog.csdn.net/xiaowu1127/article/details/127674494