爱站程序员基地第二天【JS 运算符】
运算符 / 算数运算符 / 递增和递减运算符 / 比较运算符 / 逻辑运算符 / 赋值运算符 / 运算符优先级
一. 运算符
1. 运算符（operator）
也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符
2. 算数运算符
2.1 算术运算符概述
概念：算术运算使用的符号，用于执行两个变量或值的算术运算
2.2 浮点数的精度问题
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
所以：不要直接判断两个浮点数是否相等 !
2.3 提问
1. 我们怎么判断 一个数能够被整除呢？它的余数是0 就说明这个数能被整除， 这就是 % 取余运算符的主要用途
2. 请问 1 + 2 * 3 结果是？结果是7 ，注意算术运算符优先级的，先乘除，后加减，有小括号先算小括号里面
2.4 表达式和返回值
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合 简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给我们，我们成为返回值
3. 递增和递减运算符
3.1 递增和递减运算符概述
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ — ）运算符来完成。
在 JavaScript 中，递增（++）和递减（ — ）既可以放在变量前面，也可以放在变量后面。放在变量前面时， 我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。注意：递增和递减运算符必须和变量配合使用。
3.2 递增运算符
1. 前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值
2. 后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加
【练习】
|
var a = 10; ++a; var b = ++a + 2; console.log(b); |
var c = 10; c++; var d = c++ + 2; console.log(d); |
var e = 10; var f = e++ + ++e; console.log(f); |
后置自增：先表达式返回原值，后变量的值再加
3.3 前置递增和后置递增小结
前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置：先原值运算，后自加（先人后己）
前置：先自加，后运算（先已后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num–;
4. 比较运算符
4.1 比较运算符概述
概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值 （true / false）作为比较运算的结果
【总结】
【练习】
|
var num1 = 10; var num2 = 100; v ar res1 = num1 > num2; var res2 = num1 == 11; var res3 = num1 != num2; |
5. 逻辑运算符
5.1 逻辑运算符概述
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
5.2 逻辑与&&
两边都是 true才返回 true，否则返回 false
5.3 逻辑或 ||
两边都为 false 才返回 false，否则都为true
5.3 逻辑非 ！
逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false
【练习】
|
var num = 7; var str = \”我爱你~中国~\”; // 7 console.log(num > 5 && str.length >= num); // t + t = t console.log(num < 5 && str.length >= num); // f + t = f console.log(!(num < 10)); // !t = f console.log(!(num < 10 || str.length == num）); //!( t + T) = f |
5.4 短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边
除了0 之外，所有得表达式都是真的
如果有空或者否定为假，其余为真： 0 null undefined NaN
|
1. 逻辑与&& 语法： 表达式1 && 表达式2 如果第一个表达式的值为真，则返回表达式2 如果第一个表达式的值为假，则返回表达式1 à 返回假的，如果是真的就返回下一个 |
console.log( 123 && 456 ); // 456 console.log( 0 && 456 ); // 0 console.log( 123 && 456&& 789 ); // 789 |
|
2. 逻辑或 语法： 表达式1 || 表达式2 如果第一个表达式的值为真，则返回表达式1 如果第一个表达式的值为假，则返回表达式2
|
console.log( 123 || 456 ); // 123 console.log( 0 || 456 ); // 456 console.log( 123 || 456 || 789 ); // 123 var num = 0; console.log(123 || num++); console.log(num); |
6. 赋值运算符
概念：用来把数据赋值给变量的运算符
Num = num + 1; è num ++ // num = num + 2; è num += 2
7. 运算符优先级
一元运算符里面的逻辑非优先级很高 / 逻辑与比逻辑或优先级高
【练习 1】
|
console.log( 4 >= 6 || \’人\’ != \’阿凡达\’ && !(12 * 2 == 144) && true) var num = 10; console.log( 5 == num / 2 && (2 + 2 * num).toString() === ‘22’)； |
【练习 2】
|
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); |
二，JavaScript 流程控制–分支
u 流程控制 u 顺序流程控制 u 分支流程控制 if 语句 u 三元表达式 u 分支流程控制 switch 语句
1. 流程控制
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码 的执行顺序来实现我们要完成的功能。
简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
2. 顺序流程控制
顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行， 程序中大多数的代码都是这样执行的。
3. 分支流程控制 if 语句
3.1 分支结构
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
JS 语言提供了两种分支结构语句 ： if 语句 / switch 语句
3.2 if 语句
1. 语法结构
|
// 条件成立执行代码，否则什么也不做 if (条件表达式) { // 条件成立执行的代码语句 } |
语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分 割成一个一个的语句。
2. 执行流程
【案例】： 进入网吧 弹出一个输入框，要求用户输入年龄，如果年龄大于等于 18 岁，允许进网吧。
案例分析
① 弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
② 使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
3.3 if else语句（双分支语句）
1. 语法结构
|
// 条件成立 执行 if 里面代码，否则执行else 里面的代码 if (条件表达式) { // [如果] 条件成立执行的代码 } else { // [否则] 执行的代码 } |
2. 执行流程
【案例 2】：判断闰年
接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年
案例分析
① 算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
② 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
③ 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else 里面的输出语句
④ 一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0
|
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { alert(\”这个年份是闰年\”); } else { // 剩下的是平年 alert(\”这个年份是平年\”); } |
【独立完成案例】： 判断是否中奖
接收用户输入的姓名，来判断是否中奖， 如果输入的是刘德华，则提示中了5块钱， 否则提示没有中奖。
案例分析
① 弹出 prompt 输入框，让用户输入姓名，把这个值取过来保存到变量中
② 使用 if 语句来判断是否存在这个姓名，如果存在，就执行 if 大括号里面的输出语句，否则 就执行 else 里面的输出语句
③ 一定要注意判断是否相等，用 == 或者 ===
3.4 if else if 语句(多分支语句)
1. 语法结构 & 2. 执行流程
【案例】： 判断成绩级别
要求：接收用户输入的分数，根据分数输出对应的等级字母 A、B、C、D、E。
其中：
1. 90分(含)以上 ，输出：A
2. 80分(含)~ 90 分(不含)，输出：B
3. 70分(含)~ 80 分(不含)，输出：C
4. 60分(含)~ 70 分(不含)，输出：D
5. 60分(不含) 以下，输出： E
案例分析
① 按照从大到小判断的思路
② 弹出prompt输入框，让用户输入分数，把这个值取过来保存到变量中
③ 使用多分支 if else if 语句来分别判断输出不同的值
4. 三元表达式
三元表达式也能做一些简单的条件选择。 有三元运算符组成的式子称为三元表达式
1. 语法结构
表达式1 ? 表达式2 : 表达式3;
2. 执行思路
- 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
- 简单理解： 就类似于 if else （双分支） 的简写
【案例】： 数字补0 倒计时得效果；
用户输入数字，如果数字小于10，则在前面补 0 ，比如01，09 ，如果数字大于10，则不需要补，比如 20。
案例分析
① 用户输入0~59之间的一个数字
② 如果数字小于10，则在这个数字前面补0,（加0） 否则 不做操作
③ 用一个变量接受这个返回值，输出
5. 分支流程控制 switch 语句
5.1 语法结构
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值 的选项时，就可以使用 switch。
switch ：开关 转换 ， case ：小例子 选项
关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码 执行结束
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
【案例】: 查询水果
用户在弹出框里面输入一个水果，如果有就弹出该水果的价格， 如果没有该水果就弹出“没有此水果”。
案例分析
① 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
② 将这个变量作为 switch 括号里面的表达式。
③ case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
④ 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
⑤ 将 default 设置为没有此水果。
|
var fruit = prompt(\’请您输入查询的水果: \’); switch (fruit) { case \’苹果\’: alert(\’苹果的价格是 3.5/斤\’); break; case \’榴莲\’: alert(\’榴莲的价格是 35/斤\’); break; default: alert(\’没有此水果\’); } |
5.2 switch 语句和 if else if 语句的区别
① 一般情况下，它们两个语句可以相互替换
② switch…case 语句通常处理 case为比较确定值的情况，
而 if…else…语句更加灵活，常用于范围判断(大于、 等于某个范围)
③ switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。
而if…else 语句有几种条件，就得判断多少次。
④ 当分支比较少时，if… else语句的执行效率比 switch语句高。
⑤ 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
