2. 技术
    3. day2 运算符 & 流程控制

    day2 运算符 & 流程控制

    技术2024-12-24  13

    1. 运算符

    1.1 算术运算符

    <!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> 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> </head> <body> </body> </html>

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

    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 逻辑运算符

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

    1.6 短路运算（逻辑中断）

    <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.7 赋值运算符

    <script> var num = 10; // num = num + 1; num++ // num = num + 2; // num += 2; // num += 2; num += 5; console.log(num); var age = 2; age *= 3; console.log(age); </script>

    1.8 运算符优先级

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

    2. 流程控制-分支if结构

    2.1 if

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

    2.2 if-else

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

    2.3 if-else-if

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

    2.4 三元表达式

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

    数字补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.5 switch

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

    注意事项

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

    查询水果案例

    <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>
    Processed: 0.009, SQL: 9