js-02--1. 运算符2. 表达式和语句3.分支语句

1. 运算符

• 算术运算符
• 赋值运算符
• 一元运算符
• 比较运算符
• 逻辑运算符
• 运算符优先级

1.1 算术运算符

目标：掌握算术运算符，能写出一些具备运算能力的小程序

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

• +：求和
• -：求差
• *：求积
• /：求商
• %：取模（取余数）
  • 开发中经常作为某个数字是否被整除

console.log(4 / 2) // 2
console.log(4 % 2) // 0
console.log(2 % 4) // 2
console.log(5 % 8) // 5

1.1.1 作用

目标：能说出 JavaScript 算术运算符执行的优先级顺序

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。
JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

• 乘、除、取余优先级相同
• 加、减优先级相同
• 乘、除、取余优先级大于加、减
• 使用() 可以提升优先级
• 总结：先乘除后加减，有括号先算括号里面的~~~

案例：计算圆的面积
需求：对话框中输入圆的半径，算出圆的面积并显示到页面
分析：
①：面积的数学公式：πr²
②：转换为JavaScript写法： 变量 r * r

let r = prompt('请您输入半径');
let result = 3.14 * r * r;
document.write(`计算之后圆的面积是:${result}`);

1.1.2 小结

1. 算术运算符有那几个常见的？
   + - * / %
2. 算术运算符优先级怎么记忆？
   先乘除取余，后加减，有小括号先算小括号里面的
3. 取余运算符开发中的使用场景是？
   来判断某个数字是否能被整除

1.2 赋值运算符

1.2.1 作用

• 赋值运算符：对变量进行赋值的运算符

  • 已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器

  • 其他赋值运算符：

    • +=

    • -=

    • *=

    • /=

    • %=

  • 使用这些运算符可以在对变量赋值时进行快速操作

赋值运算符

我们以+= 赋值运算符来举例

1.2.2 小结

1. = 赋值运算符执行过程？
   将等号右边的值赋予给左边, 要求左边必须是一个容器
2. += *= 出现是为了简化代码, 比如让 let num= 10 ，num加 5， 怎么写呢？
   num+= 5

1.3 一元运算符

目标能够使用一元运算符做自增运算

• 我们可以有更简便的写法了~~~

• 自增：

  • 符号：++
  • 作用：让变量的值 + 1

• 自减：

  • 符号：–
  • 作用：让变量的值 - 1

• 使用场景：
  经常用于计数来使用。 比如进行 10 次操作，用它来计算进行了多少次了

自增运算符的用法：

• 前置自增

  • 每执行 1 次，当前变量数值加 1
  • 其作用相当于num+= 1

• 后置自增：

  • 每执行 1 次，当前变量数值加 1

  • 其作用相当于num+= 1

自增/减运算符前置或后置的差异

• 后置自增：

  前置自增：先自加再使用（记忆口诀：++在前先加）
  

• 前置自增：
  后置自增：先使用再自加（记忆口诀：++在后后加）
  

1. 前置自增和后置自增独立使用时二者并没有差别！
2. 一般开发中我们都是独立使用
3. 后面 i++ 后置自增会使用相对较多

面试题

输出结果是 7

小结

1. 只需要一个表达式就可以运算的运算符叫一元运算符

2. 自增运算符也是为了简化写法，每次自加 1 ，使用场景是什么？
   经常用于计数来使用。用来计算多少次

3. 前后置自增的区别

   • 前置：先自增后运算
   • 后置：先运算后自增
   • 自减同理…
   • 开发中，我们一般都是单独使用的，后置++ 使用更多

1.4 三元运算符

目标 能利用三元运算符执行满足条件的语句

• 其实是比 if 双分支更简单的写法，有时候也叫做三元表达式

• 符号：? 与: 配合使用

• 语法：
  

• 一般用来取值

3 > 5 ? alert('对') : alert('错'); // 错

let num1 = 40;
let num2 = 30;
num1 > num2 ? console.log(num1) : console.log(num2); // 40

let re = num1 > num2 ? num1 : num2;
console.log(re); // 40

案例：判断 2 个数的最大值

需求：用户输入 2 个数，控制台输出最大的值
分析：
①：用户输入 2 个数
②：利用三元运算符输出最大值

let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
let re = num1 > num2 ? num1 : num2
document.write(`两个数最大的那个是${re}`)
//alert(num1 > num2 ? num1 : num2);

案例：数字补 0
需求：用户输入 1 个数（0-59之间的），如果数字小于 10 ，则前面进行补 0 ， 比如09 03 等
分析：
①：为后期页面显示时间做铺垫
②：利用三元运算符补 0 计算

// 1. 用户输入数字
let num = prompt('请您输入一个数字')
// 2. 判断条件是小于 10  则数字前面 + '0'   01 否则 不补
let t = num < 10 ? '0' + num : num
document.write(t)

var time = prompt('请您输入一个 0 ~ 59 之间的一个数字：');
// 三元表达式 表达式？表达式1：表达式2
time < 10 ? alert('0' + time) : alert(time);

1.5 比较运算符

1.5.1 介绍

• 作用：比较两个数据大小、是否相等

• 实际运用例：

  

1.5.2 使用

• 比较运算符：
• > ： 左边是否大于右边
• <： 左边是否小于右边
• >=： 左边是否大于或等于右边
• <=： 左边是否小于或等于右边
• ==： 左右两边是否相等
• ===： 左右两边是否类型和值都相等
• !==： 左右两边是否不全等
• 比较结果为boolean类型，即只会得到true或false

1.5.3 细节

• 字符串比较，是比较的字符对应的ASCII码

  • 从左往右依次比较
  • 如果第一位一样再比较第二位，以此类推
  • 比较的少，了解即可

• NaN不等于任何值，包括它本身

• 尽量不要比较小数，因为小数有精度问题

• 不同类型之间比较会发生隐式转换

  • 最终把数据隐式转换转成number类型再比较
  • 所以开发中，如果进行准确的比较我们更喜欢=== 或者!==

 // == 只要值一样就是true  不管数据类型
 console.log(3 > 5) // false
 console.log(5 >= 5) // true
 console.log(5 == 5) // true
 console.log(5 == '5') // true
 console.log(5 == 'pink') // false

// === 以后判断要用  ===  开发常用   要求值和数据类型都一样
console.log(5 === 5) // true
console.log(5 === '5') // false

// 特殊情况
console.log('pink' > 'red') // false
console.log('pink' > 'pin') // true
console.log(1 === NaN) // false
console.log(NaN === NaN) // false
console.log(0.1 + 0.2 === 0.3) // false
console.log(0.1 + 0.2) //0.30000000000000004
console.log(3 > '2') // true

1.5.4 小结

1. = 和 == 和 === 怎么区别？

   • = 是赋值
   • == 是判断 只要求值相等，不要求数据类型一样即可返回 true
   • === 是全等 要求值和数据类型都一样返回的才是 true
     开发中，请使用===

2. 比较运算符返回的结果是什么？
   结果只有 2 个，true 或者 false

1.6 逻辑运算符

目标：掌握逻辑运算符，为程序“能思考”做准备

1.6.1 介绍

• 提问：如果我想判断一个数据大于 5 且小于 10 ，怎么办？

  • 错误写法：5 < 数据< 10

• 逻辑运算符用来解决多重条件判断

1.6.2 使用

• 逻辑运算符：

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为结果true才为true	一假则假
||	逻辑或	或者	符号两边有一个true就为true	一真则真
!	逻辑非	取反	true变false，false变true	真变假，假变真

1.6.3 短路

• 短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

  符号	段落条件
  &&	左边为false就短路
  ||	左边为true就短路

  ​
  ​

• 原因：通过左边能得到整个式子的结果，因此没必要再判断右边

• 运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

逻辑与

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

逻辑或

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

// 1、用我们的布尔值参与的逻辑运算 true && false == false
// 2、 123 && 456 是值 或者是 表达式 参与逻辑运算？
// 3、逻辑与短路运算 
// 如果表达式1 结果为真 则返回表达式2 
// 如果表达式1 结果为假 则返回表达式1
console.log(123 && 456);//456
console.log(0 && 456);//0
// 最左边为零就直接不参与运算，返回0
console.log(0 && 1 + 2 && 456 * 56789); //0
// 如果有空的或者否定的为假，其余是真的 0 '' null undefined NaN
// 4、逻辑或短路运算
// 如果表达式1 结果为真 则返回的是表达式1
// 如果表达式1 结果为假 则返回的是表达式2
console.log(123 || 456);//123
console.log(123 || 456 || 789 || 531); //123
console.log(0 || 456 || 789 || 373);//456
var num = 0;
console.log(123 || num++);//123
console.log(num);//0

1.6.4 小结

1. 逻辑运算符有那三个？
   与(&&) 或(||) 非(!)
2. 逻辑运算符短路运算符怎么执行的？
   只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

符号	短路条件
&&	左边为false就短路
||	左边为true就短路

 // && 逻辑与 一假则假
 console.log(true && true); // true
 console.log(false && true); // false
 // || 逻辑或  一真则真
 console.log(false || true); // true
 console.log(false || false); // false
 // ! 逻辑非  取反
 console.log(!true); // false
 console.log(!false); // true

// 有6个值是当 false 来看的   其余是真的
//  false   数字0   ''  undefined   null  NaN 


function fun(x, y) {
    x = x || 0;
    y = y || 0;
	return x + y;
}
console.log(fun(1, 1)); // 2

1.6.5 练习

判断一个数是 4 的倍数，且不是 100 的倍数
需求：用户输入一个，判断这个数能被 4 整除，但是不能被 100 整除
分析：
①：用户输入
②：控制台：是否能被 4 整除并且 100 整除

var num = prompt('请输入一个整数：');
var isflag = (num % 4 == 0) && (num % 100 != 0);
//alert(Boolean(isflag));
console.log(isflag);

1.7 运算符优先级

目标：掌握运算符优先级，能判断运算符执行的顺序

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

练习

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

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

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

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

1.7 运算符优先级

答案是false，此时发生了逻辑与中断

答案是true，此时发生了逻辑或中断

答案是false 数据类型不匹配

答案是true，此时发生了逻辑或中断

2. 表达式和语句

2.1 表达式

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

2.2 语句

js 整句或命令，js 语句是以分号结束（可以省略）
比如： if 语句 for 循环语句

• 表达式和语句区别：
  表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)
  • 表达式 3 + 4
  • 语句 alert() 弹出对话框
    其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事

2.3 表达式和语句区别

• 表达式计算出一个值 比如 3+5x = 7
• 语句用来自行以使某件事发生(做什么事)
  • alert()
  • console.log()
  • 还比如我们接下来学的分支语句…

程序三大流程控制语句

• 以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

  

3. 分支语句

• 有的时候要根据条件选择执行代码，这种就叫分支结构

• 分支语句可以让我们有选择性的执行想要的代码

• 分支语句包含：

  • If分支语句
  • switch 语句

3.1 if 语句

if语句有三种使用：单分支、双分支、多分支

3.1.1 单分支

使用语法

• 括号内的条件为 true 时，进入大括号里执行代码

• 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

// if 里面的小括号都会给我们转换为 布尔型   
// false  0  ''  undefined  null  NaN 都为假

// if 小括号里面的需要条件为真才会执行
// 所以这里不会执行里面的语句
if (false) {
	alert(11)
}
if (NaN) {
	console.log('真的')
} 

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

var age = prompt('请输入您的年龄：');
if(age >= 18) {
     alert('您可以进入网吧！')
 }

3.1.2 双分支

• 双分支 if 语法：

- 案例 1：用户输入，如果工龄大于 1 年，年底奖金+2000，否则年底没奖金

// 计算工资
// 1. 用户输入工龄
let age = +prompt('请输入工龄')
let money = 10000;
// 2. 执行分支语句
if (age >= 1) {
  	alert(`您实发工资:${money + 2000}`)
} else {
  	alert(`您实发工资:${money}`)
}

案例 2 ：让用户输入年份，判断这一年是闰年还是平年并输出

• 能被 4 整除但不能被 100 整除，或者被 400 整除的年份是闰年，否则都是平年

// 2. 计算闰年
// 2.1 用户输入年份
let year = +prompt('请输入年份：')
// 2.2 执行分支语句
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
  	alert(`${year}年是闰年`)
} else {
  	alert(`${year}年是平年`)
}

3.1.3 多分支

释义：

• 先判断条件 1 ，若满足条件 1 就执行代码 1 ，其他不执行
• 若不满足则向下判断条件 2 ，满足条件 2 执行代码 2 ，其他不执行
• 若依然不满足继续往下判断，依次类推
• 若以上条件都不满足，执行else里的代码n
• 注：可以写N个条件，但这里演示只写 2 个

案例：根据输入不同时间，输出不同的问候语

注：

• 12 点以前，输出上午好
• 18 点以前，输出下午好
• 20 点以前，输出晚上好

var time = prompt('请输入现在的时间：');
if(time < 12){
    alert('上午好哦！');
} else if (time < 18) {
    alert('下午好哦！');
} else if (time < 20) {
    alert('晚上好哦！');
}

案例：判断成绩级别

要求：接受用户输入的分数，根据分数输出对应的等级字母A、

B、C、D、E。

其中：

1、90（含）以上，输出：A

2、80（含）以上，输出：B

3、70（含）以上，输出：C

4、60（含）以上，输出：D

5、60（不含）以下，输出：E

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');
}

3.2 switch 语句

目标：能利用switch执行满足条件的语句

释义：

• 找到跟小括号里数据 全等 的case值，并执行里面对应的代码
• 若没有全等=== 的则执行default里的代码
  • 例：数据若跟值 2 全等，则执行代码 2

注意事项

1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用没有break会造成case穿透

案例：简单计算器
需求：用户输入 2 个数字，然后输入+ -* / 任何一个，可以计算结果
分析：
①：用户输入数字
②：用户输入不同算术运算符，可以去执行不同的运算(switch)

// 1. 用户输入数字   还有一次 运算符
let num1 = +prompt('请您输入第一个数:')
let num2 = +prompt('请您输入第二个数:')
let sp = prompt('请您输入+ - * / 运算')
// 2. 根据不同的运算符计算不同的结果 switch
switch (sp) {
   case '+':
       alert(`您选择的是加法，结果是: ${num1 + num2}`)
       break
   case '-':
       alert(`您选择的是减法，结果是: ${num1 - num2}`)
       break
   case '*':
       alert(`您选择的是乘法，结果是: ${num1 * num2}`)
       break
   case '/':
       alert(`您选择的是除法，结果是: ${num1 / num2}`)
       break
   default:
       alert(`你输了啥？ 请输入+ - * / `)
}

案例：判断 2 个数的最大值

需求：用户输入 2 个数，控制台输出最大的值
分析：
①：用户输入 2 个数
②：利用三元运算符输出最大值

<script>
	   var num1 = prompt('请输入第一个数：');
       var num2 = prompt('请输入第二个数：');
       alert(num1 > num2 ? num1 : num2);
</script>

案例：数字补 0
需求：用户输入 1 个数（0-59之间的），如果数字小于 10 ，则前面进行补 0 ， 比如09 03 等
分析：
①：为后期页面显示时间做铺垫
②：利用三元运算符补 0 计算

<script>
 		var time = prompt('请您输入一个 0 ~ 59 之间的一个数字：');
        // 三元表达式 表达式？表达式1：表达式2
        time < 10 ? alert('0' + time) : alert(time);
</script>

3.2.1 目标

能利用switch执行满足条件的语句

释义：

• 找到跟小括号里数据 全等 的 case 值，并执行里面对应的代码
• 若没有全等 === 的则执行default里的代码
  • 例：数据若跟值 2 全等，则执行代码 2

注意事项

1. switch case 语句一般用于等值判断,不适合于区间判断
2. switch case 一般需要配合 break 关键字使用没有 break 会造成 case 穿透

3.2.2 案例

案例：简单计算器
需求：用户输入 2 个数字，然后输入+ -* / 任何一个，可以计算结果
分析：
①：用户输入数字
②：用户输入不同算术运算符，可以去执行不同的运算(switch)

<script>
        var num1 = prompt('请输入第1个数字：');
        var sign = prompt('请输入操作符：');
        var num2 = prompt('请输入第2个数字：');
       
        switch (sign) {
            case '+': alert(num1 + num2);break;
            case '-': alert(num1 - num2);break;
            case '*': alert(num1 * num2);break;
            case '/': alert(num1 / num2);break;
            default: '输入错误'
        }
</script>