当前位置： 首页 > news >正文

十天学前端之JS篇(五)

news 来源：原创 2024/5/4 13:12:20

1.JavaScript运算符

运算符(operator) 也被称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。

JavaScript中常用的运算符有：
算术运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

1.1 算术运算符

1.1.1 算术运算符概述

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhoX6q7q-1661782129937)(Typora_image/072.png)]

新建.html文件，执行代码：

<!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>
    <script>
        console.log(1 + 1);    // 2
        console.log(2 - 1);    // 1
        console.log(2 * 3);    // 6
        // 1. % 取余(取模)
        //  4除2，商是2 ，余0；5除3，商是1，余2
        console.log(4 / 2);    // 2
        console.log(4 % 2);    // 0
        console.log(5 / 3);    // 1.6666666666666667
        console.log(5 % 3);    // 2
        console.log(3 % 5);    // 3
        // 2.浮点数  算术运算里面会有问题   解决办法：1.避免  2.后续讲
        console.log(0.1 + 0.2);  // 0.30000000000000004
        console.log(0.07 * 100);  // 7.000000000000001
        // 3. 不能拿着浮点数来进行比较  是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3);   // false
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmZfaje1-1661782129939)(Typora_image/073.png)]

1.1.2 浮点数的精度问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nPk4OmS1-1661782129940)(Typora_image/074.png)]

拓展：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9vek9nF-1661782129941)(Typora_image/075.png)]

1.1.3 表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：是由数字、运算符、变量等组成的式子

返回值：表达式最终都会有一个结果，返回给我们，我们称为返回值。

新建.html文件，执行代码：

<!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>
    <script>
        // 是由数字、运算符、变量等组成的式子，我们称为表达式
        //  例如： 1 + 1 用了算术运算符,是算术表达式
        console.log(1 + 1); // 2     这个2就是返回值
        var num = 1 + 1;
        console.log(num);  // 2  这个2就是返回值
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQzjB4ak-1661782129943)(Typora_image/076.png)]

1.2 递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(–)运算符来完成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6zaFFk3I-1661782129944)(Typora_image/077.png)]

1.2.1 递增运算符

新建.html文件，执行代码：

<!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>
    <script>
        // 递增和递减运算符必须和变量配合使用
        // 问题：想要实现变量自己加1
        // 常规做法：num = num + 1,每变一次，需要再写一次
        var num = 1;
        ++num;
        console.log(num);

        var age = 5;
        --age;
        console.log(age);

        // 练习：
        var p = 10;
        console.log(++p + 10);    // 21
        console.log(p);     // 1

        console.log('*******************************');

        // 后置运算符
        // 1.前置自增和后置自增如果单独使用，效果是一样的。 口诀：先自加，后返回值
        // 2.后置自增  口诀：先返回原值，后自加1
        var num = 10;
        num++;   // num = num + 1
        console.log(num);   // 11
        var age = 8;
        console.log(age++ + 10);  // 18
        console.log(age);  // 9
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mgw5rRbp-1661782129946)(Typora_image/078.png)]

练习：

新建.html文件，执行代码：

<!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>
    <script>
        var a = 10;
        ++a;                   // 此时a已经11,++a为11
        var b = ++a + 2;       // ++a参与运算，先自增，再运算，所以是12+2
        console.log(b);        // 14

        var c = 10;
        c++;                  // 此时c为11，c++为11
        var d = c++  + 2;     // c++参与运算，先运算，再自增，所以是 11 + 2   ，此时c就为12
        console.log(d);      // 13

        var e = 10;          // aaaaaaa                                                      　　　  　　　　　　　　　　　　　　　　　　　　　　　
        var f = e++ + ++e; 
        // e++先进行运算，此时e++为10，e为11。++e为先自加，此时e为12，++e为12
        console.log(f);    // 22　　
        // 后置自增，先表达式返回原值，后面变量再自加1.
        // 前置自增，表达式和变量的值一样
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1dIrWEoA-1661782129947)(Typora_image/079.png)]

总结：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6s88rcqk-1661782129949)(Typora_image/080.png)]

1.2.2递减运算符

递减运算符同理

新建.html文件，执行代码：

<!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>
    <script>
        var a = 10;
        --a;                   // 此时a已经9，++a为9
        var b = --a + 2;       // --a参与运算，先自减，再运算，所以是8+2
        console.log(b);        // 10

        var c = 10;
        c--;                  // 此时c为9，c--为9
        var d = c--  + 2;     // c--参与运算，先运算，再自减，所以是 9 + 2   ，此时c就为8
        console.log(d);      // 11

        var e = 10;                                                       　　　  　　　　　　　　　　　　　　　　　　　　　　　
        var f = e-- + --e; 
        // e--先进行运算，此时e--为10，e为9。--e为先自减，此时e为9，--e为9
        console.log(f);    // 18　　
        // 后置自减，先表达式返回原值，后面变量再自减1.
        // 前置自减，表达式和变量的值一样
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uy2Q5O3t-1661782129952)(Typora_image/081.png)]

1.3 比较运算符概述

概念：比较运算符(关系运算符)是两个数据进行比较时所用的运算符，比较运算后，会返回一个布尔值(true/false)作为比较运算的结果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bmonRRwb-1661782129953)(Typora_image/082.png)]

关于等号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rz2FjiKK-1661782129953)(Typora_image/083.png)]

新建.html文件，执行代码：

<!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>
    <script>
        console.log(3 >= 5);  // false
        console.log(3 == 5);  // false
        console.log(3 <= 5);  // true

        console.log('******************');
        // 1.程序里面的等于符号  是 ==  只要求值相等    默认转换数据类型  会把字符串型的数据转换为数字型
        console.log(18 == 18);     // true
        console.log(18 == '18');   // true
        // 不等于
        console.log(18 != 18);     // false
        console.log(18 != 19);     // true
        // 2.程序里面有全等的概念  要求两侧的值和数据类型一样。
        console.log(18 === 18);     // ture
        console.log(18 === '18');   // false
        //  不全等
        console.log(18 !== 19);   // true
        console.log(18 !== '18');  //true
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wezChxZZ-1661782129963)(Typora_image/084.png)]

1.4 逻辑运算符概述

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。

1.4.1 逻辑与 &&

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YaZnbJFe-1661782129964)(Typora_image/085.png)]

1.4.2 逻辑或 ||

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vdg2GMHx-1661782129967)(Typora_image/086.png)]

1.4.3 逻辑非 ！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmTXtYIL-1661782129970)(Typora_image/087.png)]

新建.html文件，执行代码：

<!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>
    <script>
        // 1.逻辑与  &&    and 两侧都为true  结果才是 true   只要有一侧为false  结果就为false
        console.log(3 > 5 && 3 > 2);  // false
        console.log(3 < 5 && 3 > 2); // true
        // 2.逻辑或 || or   两侧都为假，结果才是false 只要有一侧为true,结果就是true
        console.log(1 > 2 || 3 > 2); // true
        console.log(1 > 2 || 3 < 2);  // false
        // 3.逻辑非  not  !
        console.log(!true);  // false
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UHdC6Wit-1661782129973)(Typora_image/088.png)]

测试一下：

新建.html文件，执行代码：

<!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>
    <script>
        var num = 7;
        var str = '1~2~3~4';
        console.log(str.length);  // 7
        console.log(num > 5 && str.length >= num);   // true

        console.log(num < 5 && str.length >= num);  // false

        console.log(!(num < 10));     // false

        console.log(!(num < 10 || str.length == num));   // false
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ne9phnxT-1661782129976)(Typora_image/089.png)]

1.4.4 短路运算(逻辑中断)

短路运算的原理：当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i2Ofbi5W-1661782129978)(Typora_image/090.png)]

新建.html文件，执行代码：

<!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>
    <script>
        // 1. 用我们的布尔值参与的逻辑运算  true && false  == false
        // 2. 123 && 456  是值 或者是 表达式  参与逻辑运算
        // 3.逻辑与短路运算  如果表达式1结果为真  则返回表达式2；如果表达式1结果为假，那么返回表达式1
        console.log(123 && 456);  // 数字除0外都为真，所以123为真，返回456
        console.log( 0 && 456);   // 左边为假，返回0
        console.log(0 && 1 + 2 && 456 * 45234);  // 左边第一个就为假了，后面不参与运算，跟多少都可，返回为0
        // 如果有空的或者否定的为假，其余是真的  假的举例：0 '' null  undefined NaN
        console.log('' && 1 + 2 && 456 * 45234);  // 左边第一个就为假了，后面不参与运算，跟多少都可，返回为空
        console.log('********************************');
        // 4.逻辑或短路运算  如果表达式1 结果为真  则返回的是表达式1；如果表达式1结果为假，则返回表达式2
        console.log(123 || 456);  // 结果为123
        console.log(123 || 456 || 0 || undefined || NaN);  // 123
        console.log(0 || 456 || 0);  // 456
        console.log(0 || NaN || '' || undefined || 8);  // 8
    </script>
<body>
    
</body>
</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fxsx2Gg3-1661782129981)(Typora_image/091.png)]

小测试(逻辑中断很重要，它会影响我们程序的运行结果)

<!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>
    <script>     
        var num = 0;
        console.log(123 || num++);    // 123
        console.log(num);   // 0
        // 原因： 第10行，因为短路运算或，因为123都为真了，之间返回，后面没执行，所以11行还是0
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AenAhAho-1661782129985)(Typora_image/092.png)]

1.5 赋值运算符

概念：用来把数据赋值给变量的运算符。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Ev5Pvyv-1661782129985)(Typora_image/093.png)]

新建.html文件，执行代码：

<!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>
    <script>
        var num = 10;
        // num = num + 1;    相当于  num++;
        // num = num + 2;    相当于  num += 2;
        num +=2;
        console.log(num);  // 12
        // num += 5;  相当于 num = num + 5;

        var age = 2;
        age *= 3;
        console.log(age);  // 6
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BDWhxQV-1661782129987)(Typora_image/094.png)]

1.6 运算符优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fdARknqF-1661782129990)(Typora_image/095.png)]

分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XsBsP3w0-1661782129991)(Typora_image/096.png)]

新建.html文件，执行代码：

<!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>
    <script>
        console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true);  //true
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');    //true

        console.log('***********************************');

        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a);

        var b = 3 <= 4 || 3 > 1 || 3 !=2;
        console.log(b);

        var c = 2 ==="2";
        console.log(c);

        var d = !c || b && a;
        console.log(d);

    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4chgzJ8Z-1661782129995)(Typora_image/097.png)]

2.JavaScript流程控制

2.1 流程控制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4n5uCfOi-1661782129999)(Typora_image/098.png)]

2.1.1 顺序流程控制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8Q3GnWb-1661782130001)(Typora_image/099.png)]

2.1.2 分组流程控制

分支结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g7D2xw7O-1661782130003)(Typora_image/100.png)]

2.1.2.1 if 的语法结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C3I7Z5xf-1661782130006)(Typora_image/101.png)]

2.1.2.1.1 案例：进入网吧

弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进网吧。

新建.html文件，执行代码：

<!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>
    <script>
        /* 
           1. 弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中。
           2.使用if语句来判断年龄，如果年龄大于18，就执行if大括号里面的输出语句。
        */

        var age = prompt('请输入你的年龄');
        if (parseFloat(age) >= 18) {
            alert('允许进入');
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jTV4ku8c-1661782130007)(Typora_image/102.png)]

优化：

2.1.2.2 if else语句(双分支语句)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H00G0v7C-1661782130011)(Typora_image/103.png)]

【注意】

1.if里面的语句和else里面的语句只能有一个语句执行。

2.else后面之间跟大括号，没有跟小括号。

优化代码，对17岁以下的执行语句：

<!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>
    <script>
        /* 
           1. 弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中。
           2.使用if语句来判断年龄，如果年龄大于18，就执行if大括号里面的输出语句。
        */

        var age = prompt('请输入你的年龄');
        if (parseFloat(age) >= 18) {
            alert('允许进入');
        } else {
            alert('不允许进入');
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YnAIYZ2o-1661782130012)(Typora_image/104.png)]

2.1.2.2.1 案例：判断闰年

接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UGGwN8mj-1661782130015)(Typora_image/105.png)]

新建.html文件，执行代码：

<!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>
    <script>
        // 算法：能被4整除且不能整除100为闰年(如2004年就是闰年，1901年不是闰年)或者能够被400整除的就是闰年。
        //  能被4整除即说明余数为0    %
        var year = prompt('请您输入年份：')
        if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您输入的年份是闰年')
        } else {
            alert('您输入的年份是平年')
        }

    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xo41lPB5-1661782130017)(Typora_image/106.png)]

2.1.2.2.2案例：判断中奖

接收用户输入的姓名，来判断是否中奖，如果输入的是张三，则提示中了10块钱，否则提示没有中奖。

新建.html文件，执行代码：

<!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>
    <script>
        var num = prompt('请输入兑换号：');
        if (num == '张三') {
            alert('恭喜，中奖10块钱');
        } else {
            alert('没有中奖');
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UJCCblj2-1661782130020)(Typora_image/107.png)]

2.1.2.3 if else if 语句(多分支语句)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LkXbq1Ea-1661782130021)(Typora_image/108.png)]

注意：

 <script>
        // 1.多分支语句  就是利用多个条件来选择不同的语句执行，得到不同的结果。多选一的结果
        // 2. if  else  if  语句是多分支语句
        //    3. 语法规范
    if (条件表达式1) {
        // 语句1；
    } else if (条件表达式2) {
        // 语句2;
    } else if (条件表达式3) {
        // 语句3;
    } else {

    }
    // 4. 执行思路
    /* 
     如果条件表达式1  满足就执行语句1，执行完毕后，退出整个if分支语句
     如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
     如果上面的所有条件表达式都不成立，则执行else里面的语句
    
    */
    // 5. 注意点
    // (1) 多分支语句还是多选一，最后只有一个语句执行
    // (2) else if里面的条件理论上是可以任意多个的
    // (3) else if 中间有个空格
    </script>
2.1.2.3.1 案例:判断成绩

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpRDdohG-1661782130022)(Typora_image/109.png)]

新建.html文件，执行代码如下：

<!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>
    <script>
        //  伪代码： 中文思路的代码
        /* 
            1.弹出prompt输入框，让用户输入分数，把这个值取过来保存到变量中
            2.使用多分支if else if 语句来分别判断输出不同的值
        */
       var score = prompt('请您输入分数:');
       if (score >= 90) {
        alert('您的得分是A');
       } else if (score >= 80) {
        alert('您的得分是B');
       } else if (score >= 70) {
        alert('您的得分是C');
       } else if (score >= 60) {
        alert('您的得分是D');
       } else {
        alert('您的得分是E');
       }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AiPXSsqN-1661782130025)(Typora_image/110.png)]

2.1.3 三元表达式

新建.html文件，代码如下：

<!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>
    <script>
        /* 
        1.有三元运算符组成的式子我们称为三元表达式
        2. 例如 ++num  一个操作符运算，叫做一元运算符，我们称为一元表达式;
                3 + 5  两个操作符运算，称为二元表达式；
                有 ? 和 : 的式子称为三元表达式
        3.语法结构：
        条件表达式 ? 表达式1 : 表达式2
        4.执行思路
        如果条件表达式结果为真，则返回表达式1的值;如果条件表达式结果为假，则返回 表达式2 的值
        5.代码体验
        
        */
       var num = 10;
       var result = num > 5 ? '是大于5' : '不是大于5';   // 把表达式结果赋值给返回值result
       console.log(result);
       /* 
       三元表达是简写版的if分支循环
       if (num > 5) {
        result = '是大于5';
       } else {
        result = '不是大于5';
       } */
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wLjg1voS-1661782130025)(Typora_image/111.png)]

2.1.3.1 案例：数字补0

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8gjM5lf-1661782130028)(Typora_image/112.png)]

新建.html文件，执行代码如下：

<!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>
    <script>
        /* 
        用户输入0~59之间的数字，如果数字小于10,则在这个数字前面补0，(加0) 否则 不做操作
        用一个变量接收这个返回值，输出    
        */
        var time = prompt('请您输入一个0~59之间的一个数字');
        //    三元表达式        表达式  ? 表达式1 : 表达式2
        var result = time  < 10 ? '0' + time : time;   // 把返回值赋值给一个变量
        alert(result);


    </script>
</head>
<body>
    
</body>
</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLCGAu3H-1661782130029)(Typora_image/113.png)]

2.1.4 分支流程控制switch语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sxxNEr4f-1661782130030)(Typora_image/114.png)]

新建.html文件，执行代码如下：

<!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>
    <script>
        // 1. switch 语句也是多分支语句，也可以实现多选一
        // 2. 语法结构
        /*  
        switch 是转换、开关   case 小例子或者选项的意思
        switch(表达式) {
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
            ...
            default:
                执行最后的语句;
        }
 
        */
        //  执行思路:利用我们表达式的值  和case 后面的选项值相匹配 如果匹配上，就执行该case里面的语句，如果都没有
        //           匹配上，那么执行default里面的语句。


        switch (2) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');
        }
    </script>
</head>
<body>
    
</body>
</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3AHjRNKQ-1661782130031)(Typora_image/115.png)]

【注意点】

<!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>
    <script>
        var num = 1;
         switch (num) {
            case 1:
                console.log('这是1');
                // break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');
        }
        /* 
        switch注意事项
        1.开发里面，表达式经常写成变量
        2.我们num的值和case里面的值相匹配的时候是全等，必须是值和数据类型一致才行，也就是 num === 1;
         例如 ： '3' !==== 3, 无法匹配
        3. break原则上可以省略，如果当前的case里面没有break,则不会退出switch,是继续执行下一个case.
        
        
        */
    </script>
</head>
<body>
    
</body>
</html>

示例如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-49DmzlCU-1661782130032)(Typora_image/116.png)]

2.1.4.1 案例：查询水果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OV0Witqi-1661782130033)(Typora_image/117.png)]

新建.html文件，执行代码如下：

<!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>
    <script>
        var fruit = prompt('请您输入查询的水果:');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格是 3.5元/斤');
                break;
            case '香蕉':
                alert('香蕉的价格是3元/斤');
                break;
            case '葡萄':
                alert('葡萄的香蕉是9元/斤');
                break;
            default:
                alert('没有此水果');
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kRgvRhi-1661782130034)(Typora_image/118.png)]

2.1.5 switch和if else if 语句的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zsEDQ97P-1661782130034)(Typora_image/119.png)]

相关文章：

  • python 并发、并行处理、分布式处理
  • 推荐一款国人开源的 Redis 可视化管理工具
  • 开发工程师必备————【Day22】前端开发之jQuery更多操作
  • 04【DQL查询】
  • Vscode常用插件
  • 利用MyBatisX插件自动生成代码
  • 【数据结构】——栈和链表的面试题详解
  • 如何从 apt-get 升级中排除特定软件包
  • C++/Python:罗德里格斯旋转矩阵
  • c++征途 --- STL初识
  • 学习编程的第二十三天
  • 上交所技术——2020春招应用开发工程师(Java)笔试
  • 猿创征文｜时间序列分析算法之二次指数平滑法和三次指数平滑法详解+Python代码实现
  • 基于人工兔优化算法的函数寻优和工程优化
  • 网络安全无小事, 所有艾思运维人员, 在nginx中必须对thinkphp的目录做以下安全设置, 未尽目录请自行添加
  • 自己简单写的 事件订阅机制
  • 《网管员必读——网络组建》（第2版）电子课件下载
  • JAVA_NIO系列——Channel和Buffer详解
  • leetcode46 Permutation 排列组合
  • Three.js 再探 - 写一个跳一跳极简版游戏
  • vagrant 添加本地 box 安装 laravel homestead
  • 后端_ThinkPHP5
  • 前端面试题总结
  • 前端性能优化——回流与重绘
  • ［地铁译］使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • CMake 入门1/5：基于阿里云 ECS搭建体验环境
  • 扩展资源服务器解决oauth2 性能瓶颈
  • 曜石科技宣布获得千万级天使轮投资，全方面布局电竞产业链 ...
  • ​linux启动进程的方式
  • #《AI中文版》V3 第 1 章 概述
  • #我与Java虚拟机的故事#连载15：完整阅读的第一本技术书籍
  • $forceUpdate()函数
  • （ 用例图）定义了系统的功能需求，它是从系统的外部看系统功能，并不描述系统内部对功能的具体实现
  • （14）目标检测_SSD训练代码基于pytorch搭建代码
  • （4）事件处理——（2）在页面加载的时候执行任务（Performing tasks on page load）...
  • （4）通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • (done) NLP “bag-of-words“ 方法 （带有二元分类和多元分类两个例子）词袋模型、BoW
  • （Mac上）使用Python进行matplotlib 画图时，中文显示不出来
  • （八）五种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • （附源码）ssm旅游企业财务管理系统 毕业设计 102100
  • （附源码）基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • （每日持续更新）信息系统项目管理（第四版）（高级项目管理）考试重点整理 第13章 项目资源管理（七）
  • (免费领源码）Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • （三）c52学习之旅-点亮LED灯
  • （五）关系数据库标准语言SQL
  • （一）Mocha源码阅读: 项目结构及命令行启动
  • （转）PlayerPrefs在Windows下存到哪里去了？
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • ***检测工具之RKHunter AIDE
  • .bashrc在哪里，alias妙用
  • .NET/C# 在代码中测量代码执行耗时的建议（比较系统性能计数器和系统时间）...
  • .NetCore Flurl.Http 升级到4.0后 https 无法建立SSL连接
  • ??在JSP中，java和JavaScript如何交互？
  • []AT 指令 收发短信和GPRS上网 SIM508/548
  • [C/C++]_[初级]_[关于编译时出现有符号-无符号不匹配的警告-sizeof使用注意事项]