运算符、流程控制

最新推荐文章于 2024-03-16 22:35:23 发布

步步生花@苏殿主

最新推荐文章于 2024-03-16 22:35:23 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/sjp991012/article/details/124328713

版权

JavaScript学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

一、JavaScript 运算符
二、JavaScript 流程控制-分支
三、JavaScript 流程控制-循环
四、JavaScript 命名规范以及语法格式
五、综合案例：简易ATM

一、JavaScript 运算符

1、运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：算数运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符

2、算数运算符

运算符	实例
`+` 加	10 + 20 = 30
`-` 减	10 - 20 = -10
`*` 乘	10 * 20 = 200
`/` 除	10 / 20 = 0.5
`%` 取余数（取模）	9 % 2 = 1 (返回除法的余数)
`**` 幂	9 ** 2 = 81

<script>
    console.log(1 + 1); // 2
    console.log(1 - 1); // 0
    console.log(1 * 1); // 1
    console.log(1 / 1); // 1
    // % 取余 （取模）  
    console.log(4 % 2); // 0
    console.log(5 % 3); // 2
    console.log(3 % 5); // 3
    // ** 幂
    let p = 9;
    console.log(p**2); //81
    console.log(p**3); //729
</script>

（1）浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。所以：不要直接判断两个浮点数是否相等 !

<script>
   // 1. 浮点数 算数运算里面会有问题
   console.log(0.1 + 0.2); // 0.30000000000000004
   console.log(0.07 * 100); // 7.000000000000001
   // 2. 我们不能直接拿着浮点数来进行相比较 是否相等
   var num = 0.1 + 0.2;
   console.log(num == 0.3); // false
</script>

（2）表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
表达式最终都会有一个结果，返回给我们，我们称为返回值

<script>
    //  是由数字、运算符、变量等组成的式子 我们称为为表达式   1 + 1 
    console.log(1 + 1); // 2 就是返回值
    // 1 + 1 = 2
    // 在我们程序里面  2 = 1 + 1   把我们的右边表达式计算完毕把返回值给左边
    let num = 1 + 1;
</script>

3、递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。
在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
注意：递增和递减运算符必须和变量配合使用。

（1）前置递增（递减）运算符

++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值
--num 前置递增，就是自减1，类似于 num = num - 1，但是 --num 写起来更简单。
使用口诀：先自减，后返回值

<script>
    // 1. 想要一个变量自己加1   num = num + 1 比较麻烦
    let num = 1;
    num = num + 1; // ++num
    num = num + 1;
    console.log(num); // 3
    // 2. 前置递增运算符  ++ / -- 写在变量的前面
    let age = 10;
    ++age; // 类似于 age = age + 1
    console.log(age); //11
    --age; // 类似于 age = age - 1
    console.log(age); //10

    // 3. 先加1 (减1)  后返回值
    let p = 10;
    console.log(++p + 10); //21
    console.log(--p + 10); //20
</script>

（2）后置递增（递减）运算符

num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加
num-- 后置递减，就是自减1，类似于 num = num - 1 ，但是 num-- 写起来更简单。
使用口诀：先返回原值，后自减

<script>     
    let num = 10;
    num++; // num = num + 1    ++num;
    console.log(num); //11

    num--; // num = num - 1    --num;
    console.log(num); //10

    // 1. 前置自增（自减）和后置自增（自减）如果单独使用 效果是一样的
    // 2. 后置自增（自减） 口诀：先返回原值 后自加（自减）1 
    let age = 10;
    console.log(age++ + 10); // 20
    console.log(age);  //11

    console.log(age-- + 10); // 21
    console.log(age);  //10
</script>

（3）练习

递增

<script>
    let a = 10;
    ++a; // ++a  11    a = 11
    let b = ++a + 2; // a = 12   b = 14
    console.log(b); // 14

    let c = 10;
    c++; // c++ 11  c = 11
    let d = c++ + 2; //  c = 11  -->  c = 12, d=13
    console.log(d); // 13

    let e = 10;
    let f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12
    console.log(f); // 22
</script>

递减

<script>
    let a = 10;
    --a; // --a  9    a = 9
    let b = --a + 2; // a = 8  b = 10
    console.log(b); // 10

    let c = 10;
    c--; // c-- 9  c = 9
    let d = c-- + 2; //  c = 9  -->  c = 8, d=11
    console.log(d); // 11

    let e = 10;
    let f = e-- + --e; // 1. e-- =  10  e = 9  2. e = 8  --e = 8
    console.log(f); // 18
</script>

（4）小结

前置递增（递减）和后置递增（递减）运算符可以简化代码的编写，让变量的值 + 1（-1），比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置：先原值运算，后自加或自减（先人后己）
前置：先自加或自减，后运算（先已后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num--;

4、比较运算符

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

运算符	案例	结果
`<` 小于号	`1 < 2`	`true`
`>` 大于号	`1 > 2`	`false`
`>=` 大于等于号	`2 >= 2`	`true`
`<=` 小于等于号	`3 <= 2`	`false`
`==` 判等号（会转型）	`37 == 37`	`true`
`!=` 不等号	`37 != 37`	`false`
`===` 严格等于（要求值和数据类型都一致）	`37 === '37'`	`false`
`!==` 严格不等于	`5 !== 2 +3`	`false`

<script>
    console.log(3 >= 5); // false
    console.log(2 <= 4); // true
    //1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
    console.log(3 == 5); // false
    console.log('pink老师' == '刘德华'); // flase
    console.log(18 == 18); // true
    console.log(18 == '18'); // true
    console.log(18 != 18); // false
    // 2. 严格等于 要求 两侧的值 还有 数据类型完全一致才可以 true
    console.log(18 === 18); // true
    console.log(18 === '18'); // false
    // 3. 严格不等于 
    console.log(18 !== 18); // false
    console.log(18 !== '18'); // true
</script>

5、逻辑运算符

运算符	说明	案例
`&&`	“逻辑与”，`and`	`true && false`
`\|\|`	“逻辑或”，`or`	`true \|\| false`
`!`	“逻辑非”， `not`	`!true`

（1）逻辑与&&

两边都是 true才返回 true，否则返回 false

<script>
    // 逻辑与 &&  and 两侧都为true  结果才是 true  只要有一侧为false  结果就为false 
    console.log(3 > 5 && 3 > 2); // false
    console.log(3 < 5 && 3 > 2); // true
</script>

（2）逻辑或||

两边都为 false 才返回 false，否则都为true

<script>
    //  逻辑或 || or  两侧都为false  结果才是假 false  只要有一侧为true  结果就是true
    console.log(3 > 5 || 3 > 2); // true 
    console.log(3 > 5 || 3 < 2); // false
</script>

（3）逻辑非！

逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

<script>
    //  逻辑非  not  ！ 
    console.log(!true); // false
</script>

（4）练习

<script>
    var num = 7;
    var str = "我爱你~中国~";

    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>

（5）短路运算

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

逻辑与

语法： 表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

逻辑或

语法： 表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

<script>
    // 1. 用我们的布尔值参与的逻辑运算  true && false  == false 
    // 2. 123 && 456  是值 或者是 表达式 参与逻辑运算？ 
    // 3. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1
    console.log(123 && 456); // 456
    console.log(0 && 456); //  0
    console.log(0 && 1 + 2 && 456 * 56789); // 0
    console.log('' && 1 + 2 && 456 * 56789); // ''
    // 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN
    // 4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
    console.log(123 || 456); // 123
    console.log(123 || 456 || 456 + 123); // 123
    console.log(0 || 456 || 456 + 123); // 456
    // 逻辑中断很重要 它会影响我们程序运行结果
    var num = 0;
    console.log(123 || num++); // 123 , num++没有被执行，num依然是 0
    console.log(num); // 0
</script>

6、赋值运算符

运算符	说明	案例
`=`	直接赋值	`true && false`
`+= 、 -=`	加、减一个数后再赋值	`true \|\| false`
`*= 、 /= 、 %=`	乘、除、取模后再赋值	`!true`

<script>
    let num = 10;
    console.log(num); //10

    // num = num + 1;  等价 num++
    // num = num + 2;  等价 num += 2;
    // num += 2;
    num += 5;
    console.log(num); //15
    num -= 4;
    console.log(num); //11

    // num = num * 3;   等价 num *= 3;
    // num = num / 3;   等价 num /= 3;
    // num = num % 3;   等价 num %= 3;
    // num += 2;
    let age = 2;
    age *= 7;
    console.log(age); // 14
    age /= 2;
    console.log(age); // 7
    age %= 3;
    console.log(age); // 1
</script>

7、运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

优先级	运算符	顺序
1	小括号	`()`
2	一元运算符	`++ -- !`
3	算数运算符	`先 * / % 后 + -`
4	关系运算符	`> >= < <=`
5	相等运算符	`== != === !==`
6	逻辑运算符	`先 && 后 \|\|`
7	赋值运算符	`=`
8	逗号运算符	`,`

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

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

    let c = 2 === "2";
    console.log(c); //false

    let d = !c || b && a;
    console.log(d); //true
</script>

二、JavaScript 流程控制-分支

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
JS 语言提供了两种分支结构语句： if 语句、 switch 语句

在这里插入图片描述

1、顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

2、分支流程控制 if 语句

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

双分支语句

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

多分支语句

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

案例

<script>
    //  按照从大到小判断的思路
    // 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
    // 使用多分支 if else if 语句来分别判断输出不同的值
    let score = prompt('请您输入分数:');
    if (score >= 90) {
        alert('宝贝，你是我的骄傲');
    } else if (score >= 80) {
        alert('宝贝，你已经很出色了');
    } else if (score >= 70) {
        alert('你要继续加油喽');
    } else if (score >= 60) {
        alert('孩子，你很危险');
    } else {
        alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
    }
</script>

3、三元表达式

表达式1 ? 表达式2 : 表达式3;
如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
简单理解：就类似于 if else （双分支）的简写

<script>
    let num = 10;
    let result1 = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
    console.log(result1); //是的

    let time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
    // 三元表达式 表达式 ？ 表达式1 ：表达式2 
    let result2 = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
    console.log(result2);
</script>

4、分支流程控制 switch 语句

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

关键字 switch 后面括号内可以是表达式或值，通常是一个变量
关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

<script>
    let fruit = prompt('请您输入查询的水果:');
    switch (fruit) {
        case '苹果':
            alert('苹果的价格是 3.5/斤');
            break;
        case '榴莲':
            alert('榴莲的价格是 35/斤');
            break;
        default:
            alert('没有此水果');
    }
</script>

三、JavaScript 流程控制-循环

在Js 中，主要有三种类型的循环语句：

for 循环
while 循环
do…while 循环

1、for循环

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 let关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

案例

求1-100之间所有数的平均值
求1-100之间所有偶数和奇数的和
求1-100之间所有能被3整除的数字的和

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 求1-100之间所有数的平均值   需要一个 sum 和的变量 还需要一个平均值 average 变量
        let sum = 0;
        let average = 0;
        for (let i = 1; i <= 100; i++) {
            sum = sum + i;
        }
        average = sum / 100;
        console.log(average);

        // 2. 求1-100之间所有偶数和奇数的和   我们需要一个偶数的和变量 even  还需要一个奇数 odd
        let even = 0;
        let odd = 0;
        for (let i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even = even + i;
            } else {
                odd = odd + i;
            }
        }
        console.log('1~100 之间所有的偶数和是' + even);
        console.log('1~100 之间所有的奇数和是' + odd);

        // 3. 求1-100之间所有能被3整除的数字的和   
        let result = 0;
        for (let i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                // result = result + i;
                result += i;
            }
        }
        console.log('1~100之间能够被3整数的数字的和是：' + result);
    </script>
</head>

<body>

</body>

</html>

2、双重 for 循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

(1)案例：打印n行n列的星星

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 打印n行n列的星星
        let rows = prompt('请您输入行数:');
        let cols = prompt('请您输入列数:');
        let str = '';
        for (let i = 1; i <= rows; i++) {
            for (let j = 1; j <= cols; j++) {
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

(2)案例：打印倒三角形案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 打印倒三角形案例
        var str = '';
        for (var i = 1; i <= 10; i++) { // 外层循环控制行数
            for (var j = i; j <= 10; j++) { // 里层循环打印的个数不一样  j = i
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

(3)案例：打印九九乘法表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 九九乘法表
        // 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
        // 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行  
        // 内层的 for 循环控制每行公式  j  
        // 核心算法：每一行 公式的个数正好和行数一致， j <= i;
        // 每行打印完毕，都需要重新换一行
        var str = '';
        for (var i = 1; i <= 9; i++) { // 外层循环控制行数
            for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数  j <= i
                str += j + '×' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

3、while 循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下：

while (条件表达式) {
    // 循环体代码 
}

使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

// 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
let message = prompt('你爱我吗?');
while (message !== '我爱你') {
    message = prompt('你爱我吗?');
}
alert('我也爱你啊！');

4、do while循环

do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
do… while 语句的语法结构如下：

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

注意：先再执行循环体，再判断，我们会发现 do…while 循环语句至少会执行一次循环体代码，而 while 可能一次也不执行

let message;
do {
    message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');

5、continue break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

for (let i = 1; i <= 5; i++) {
    if (i == 3) {
        continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
    }
    console.log('我正在吃第' + i + '个包子');

}

案例：求1~100 之间，除了能被7整除之外的整数和

 let sum = 0;
 for (let i = 1; i <= 100; i++) {
     if (i % 7 == 0) {
         continue;
     }
     sum += i;
 }
 console.log(sum);

break 关键字用于立即跳出整个循环（循环结束）。
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

for (let i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
    }
    console.log('我正在吃第' + i + '个包子');
}

四、JavaScript 命名规范以及语法格式

1、标识符命名规范

变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词

2、操作符规范

操作符的左右两侧各保留一个空格

for (let i = 1; i <= 5; i++) {
   if (i == 3) {
       break; 
   }
   console.log('我正在吃第' + i + '个包子呢');
}

3、单行注释规范

单行注释前面注意有个空格

for (let i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个包子呢');
}

4、其他规范

在这里插入图片描述

五、综合案例：简易ATM

里面现存有 100 块钱。
如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框
如果取钱，就减去取的钱数，之后弹出显示余额提示框
如果显示余额，就输出余额
如果退出，弹出退出信息提示框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        let money = 100;
        let action;
        do {
            action = prompt("请输入您要的操作数字：\n1、存钱\n2、取钱\n3、显示余额\n4、退出");
            switch (action) {
                case '1':
                    let add = prompt("请输入所存钱数");
                    money += parseFloat(add);
                    alert("余额为"+money+"元！")
                    break;
                case '2':
                    let cut = prompt("请输入所存钱数");
                    money -= cut;
                    alert("余额为"+money+"元！")
                    break;
                case '3':
                    alert("余额为"+money+"元！")
                    break;
                case '4':
                    alert("您正在退出！")
                    break;
                default:
                    alert("请输入正确操作数字");
            }
        } while (action !== '4');
    </script>
</head>

<body>

</body>

</html>