JavaScript运算符与流程控制

运算符与流程控制

1. 运算符

1.1 运算符的分类

1.2 算数运算符

 <script>
        console.log(1 + 1); // 2
        console.log(1 - 1); // 0
        console.log(1 * 1); // 1
        console.log(1 / 1); // 1
        // 1. % 取余 （取模）  
        console.log(4 % 2); // 0
        console.log(5 % 3); // 2
        console.log(3 % 5); // 3
        // 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>

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

1.3 递增和递减运算符

• 前置递增运算符

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

• 后置递增运算符

<script>
        var num = 10;
        num++; // num = num + 1    ++num;
        console.log(num);
        // 1. 前置自增和后置自增如果单独使用 效果是一样的
        // 2. 后置自增 口诀：先返回原值 后自加1 
        var age = 10;
        console.log(age++ + 10);
        console.log(age);
</script>

• 递增运算练习

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

        var c = 10;
        c++; // c++ 11  c = 11
        var d = c++ + 2; //  c++  = 11     c = 12
        console.log(d); // 13

        var e = 10;
        var f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12
        console.log(f); // 22
        // 后置自增  先表达式返回原值 后面变量再自加1
</script>

1.4 比较运算符

<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);
        console.log(18 === '18'); // false
</script>

1.5 逻辑运算符

1.51 概述

1.52 逻辑与&&

1.53逻辑或 ||

1.54 逻辑非 ！

1.55 短路运算（逻辑中断）

<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++);
        console.log(num); // 0
</script>

1.56 练习

<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>

1.6 赋值运算符

1.7 运算符优先级

<script>
        //  ++num   !num     2 + 3
        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);//false

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

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

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

2. 流程控制

2.1 概念

2.2 顺序流程控制

2.3 分支流程控制

2.4 if语句

2.41 介绍

2.42 代码解释

<script>
        // 1. if 的语法结构   如果if
        // if (条件表达式) {
        //     // 执行语句
        // }

        // 2. 执行思路  如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句 
        // 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
        // 3. 代码体验
        if (3 < 5) {
            alert('沙漠骆驼');
        }
</script>

<script>
        // 弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
        // 使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
        var age = prompt('请输入您的年龄:');
        if (age >= 18) {
            alert('我想带你去网吧偷耳机');
        }
</script>

<script>
        // 1. 语法结构  if 如果  else 否则
        // if (条件表达式) {
        //     // 执行语句1
        // } else {
        //     // 执行语句2 
        // }
        // 2. 执行思路 如果表达式结果为真 那么执行语句1  否则  执行语句2
        // 3. 代码验证
        var age = prompt('请输入您的年龄:');
        if (age >= 18) {
            alert('我想带你去网吧偷耳机');
        } else {
            alert('滚， 回家做作业去');
        }
        // 5. if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行  2选1
        // 6.  else 后面直接跟大括号
</script>

<script>
        // 算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
        // 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
        // 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
        // 一定要注意里面的且 &&  还有或者 || 的写法，同时注意判断整除的方法是取余为 0
        var year = prompt('请您输入年份：');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您输入的年份是闰年');
        } else {
            alert('您输入的年份是平年');
        }
</script>

<script>
        // 1. 多分支语句   就是利用多个条件来选择不同的语句执行 得到不同的结果  多选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) 多分支语句还是多选1 最后只能有一个语句执行
        // (2) else if 里面的条件理论上是可以任意多个的
        // (3) else if 中间有个空格了
</script>

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

2.43 三元表达式

<script>
        // 1. 有三元运算符组成的式子我们称为三元表达式
        // 2. ++num     3 + 5     ? :
        // 3. 语法结构 
        // 条件表达式 ？ 表达式1 ： 表达式2
        // 4. 执行思路
        // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
        // 5. 代码体验
        var num = 10;
        var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
        console.log(result);
        // if (num > 5) {
        //     result = '是的';
        // } else {
        //     result = '不是的';
        // }
</script>

2.44 数字补0案例

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

2.45 案例

• 用户问候

<script>
        // 题目描述： 
        // 通过弹出框提示用户输入时间信息，根据用户输入的时间弹出问候信息；
        // 如：
        // 用户输入的时间在6-12之间 弹出“上午好”；
        // 用户输入的时间在13-18之间 弹出“下午好”；
        // 用户输入的时间在19-23之间 弹出“晚上好”；
        // 用户输入的时间在0-5之间 弹出“这是休息时间，不要说话！”；
        var time = prompt('please enter your time');
        if (time >= 6 && time < 12) {
            alert('good morning');
        } else if (time >= 12 && time < 18) {
            alert('good afternoon');
        } else if (time >= 18 && time < 23) {
            alert('good night');
        } else if(time >= 0 && time < 6){
            alert('have a rest,do not speak');
        }
</script>

• 三元求最大

<script>
        //通过提示框提示用户依次输入2个数值，用户输入完成后弹出用户输入的最大值
        var num1=prompt('please enter num1');
        var num2=prompt('please enter num2');
        var num3=num1>num2?num1:num2;
        if(num3) {
            alert(num3);
        } 
</script>

• if判断奇偶

 <script>
        // 通过提示框提示用户输入一个数值，用户输入完成后弹出数值的奇偶性
        var num=prompt('please enter a number');
        if (num%2==0) {
            alert(num+'是偶数');
        } else {
            alert(num+'是奇数');
        }
</script>

• 周几

<script>
        //假设这个月1号是星期一，提示用户输入本月的日期（即1日-31日），返回用户输入日期是星期几
        //题目提示：
        //利用%和7取余，再判定是星期几
        var today = prompt('用户输入本月的日期（即1日-31日）');
        var num = today % 7;
        if (num == 1) {
            alert('Monday');
        } else if (num == 2) {
            alert('Tuesday');
        } else if (num == 3) {
            alert('Wednesday');
        } else if (num == 4) {
            alert('Thursday');
        } else if (num == 5) {
            alert(' Friday');
        } else if (num == 6) {
            alert('Saturday');
        } else if (num == 7 || num == 0) {
            alert('Sunday');
        }
</script>

• 请餐

<script>
        var money = prompt('please enter money');
        if (money >= 2000) {
            alert('请大家吃西餐');
        } else if (money >= 1500 && money <= 1000) {
            alert('请大家吃快餐');
        }
        else if (money <= 1500 && money >= 1000) {
            alert('请大家喝饮料');
        }
        else if (money >= 500 && money < 1000) {
            alert('请大家吃棒棒糖');
        }
        else {
            alert('班长下次把钱带够');
        }
</script>

• 分数等级

<script>
        var score = prompt('please enter a score');
        if (score >= 90) {
            console.log('A');
        } else if (score <= 90 && score >= 80) {
            console.log('B');
        }
        else if (score <= 80 && score >= 70) {
            console.log('C');
        }
        else if (score <= 70 && score >= 60) {
            console.log('D');
        } else if (score < 60) {
            console.log('E');
        }
</script>

2.5 switch语句

2.51 概念

2.52 switch 语句和if else if 语句的区别

<script>
        // 1. switch 语句也是多分支语句 也可以实现多选1
        // 2. 语法结构 switch 转换、开关  case 小例子或者选项的意思
        // switch (表达式) {
        //     case value1:
        //         执行语句1;
        //         break;
        //     case value2:
        //         执行语句2;
        //         break;
        //         ...
        //         default:
        //             执行最后的语句;
        // }
        // 3. 执行思路  利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句  如果都没有匹配上，那么执行 default里面的语句
        // 4. 代码验证
        switch (8) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');

        }
</script> 

2.53 注意事项

<script>
        // switch注意事项
        var num = 1;
        switch (num) {
            case 1:
                console.log(1);

            case 2:
                console.log(2);

            case 3:
                console.log(3);
                break;


        }
        // 1. 我们开发里面 表达式我们经常写成变量
        // 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等   必须是值和数据类型一致才可以 num === 1
        // 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
</script>

2.53 代码案例

<script>
        // 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
        // 将这个变量作为 switch 括号里面的表达式。
        // case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
        // 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
        // 将 default 设置为没有此水果。
        var fruit = prompt('请您输入查询的水果:');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格是 3.5/斤');
                break;
            case '榴莲':
                alert('榴莲的价格是 35/斤');
                break;
            default:
                alert('没有此水果');
        }
</script>