JavaScript day02 笔记

一、运算符

1️⃣算术运算符

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数），开发中经常用于作为某个数字是否被整除

注意：在计算失败时，显示的结果是 NaN （not a number）

// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20// 1. 取模(取余数)  使用场景：  用来判断某个数是否能够被整除
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2)   // pink老师2

2️⃣赋值运算符

对变量进行赋值的运算符 ，简化代码

“ = ”将等号右边的值赋予给左边 , 要求左边必须是一个容器

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

<script>
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)
</script>

3️⃣自增/自减(一元)运算符

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
--	自减	变量自身的值减1，例如: x--

1. ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用

1. ++在后（后缀式）我们会使用更多

4️⃣比较运算符

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	左右两边是否类型和值都相等（重点）
==	左右两边值是否相等
!=	左右值不相等
!==	左右两边是否不全等

<script>console.log(3 > 5)console.log(3 >= 3)console.log(2 == 2)// 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值console.log(2 == '2')  // true// console.log(undefined === null)// === 全等 判断 值 和 数据类型都一样才行// 以后判断是否相等 请用 ===  console.log(2 === '2')console.log(NaN === NaN) // NaN 不等于任何人，包括他自己console.log(2 !== '2')  // true  console.log(2 != '2') // false console.log('-------------------------')console.log('a' < 'b') // trueconsole.log('aa' < 'ab') // trueconsole.log('aa' < 'aac') // trueconsole.log('-------------------------')
</script>

tip1：字符串是比较对应的ASCII码

从左往右比较

若第一位一样，则比较第二位，以此类推

tip2：NaN不等于任何值，包括本身

涉及到“NaN”都是false

尽量不比较小数，小数有精度问题

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

最终把数据隐式转换为number类型比较

更准确的比较使用 === 或者 ！==

🎀总结：

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

=是赋值

==是判断 只要求值相等，不求数据类型也相等

===是全等 值和数据类型都一样

2、比较运算符返回的结果是什么？

结果只有true 、flase

5️⃣逻辑运算符

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

符号	名称	特点	口诀
&&	逻辑与	符号两边有一个假的结果为假	一假则假
||	逻辑或	符号两边有一个真的结果为真	一真则真
!	逻辑非	true变false false变true	真变假，假变真

A	B	A && B	A || B	!A
false	false	false	false	true
false	true	false	true	true
true	false	false	true	false
true	true	true	true	false

<script>// 逻辑与 一假则假console.log(true && true)console.log(false && true)console.log(3 < 5 && 3 > 2)console.log(3 < 5 && 3 < 2)console.log('-----------------')// 逻辑或 一真则真console.log(true || true)console.log(false || true)console.log(false || false)console.log('-----------------')// 逻辑非  取反console.log(!true)console.log(!false)console.log('-----------------')let num = 6console.log(num > 5 && num < 10)console.log('-----------------')</script>

6️⃣运算符优先级

逻辑运算符优先级： ！> && > | |

二、语句

1️⃣分支语句

1. if分支语句（重点）

1. 三元运算符

1. switch语句

（1）if 分支语句

if(条件表达式) {// 满足条件要执行的语句
}

小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

<script>// 单分支语句// if (false) {//   console.log('执行语句')// }// if (3 > 5) {//   console.log('执行语句')// }// if (2 === '2') {//   console.log('执行语句')// }//  1. 除了0 所有的数字都为真//   if (0) {//     console.log('执行语句')//   }// 2.除了 '' 所有的字符串都为真 true// if ('pink老师') {//   console.log('执行语句')// }// if ('') {//   console.log('执行语句')// }// // if ('') console.log('执行语句')// 1. 用户输入let score = +prompt('请输入成绩')// 2. 进行判断输出if (score >= 700) {alert('恭喜考入黑马程序员')}console.log('-----------------')</script>

（2）if 双分支语句

if (条件表达式){// 满足条件要执行的语句
} else {// 不满足条件要执行的语句
}

 <script>// 1. 用户输入let uname = prompt('请输入用户名:')let pwd = prompt('请输入密码:')// 2. 判断输出if (uname === 'pink' && pwd === '123456') {alert('恭喜登录成功')} else {alert('用户名或者密码错误')}</script>

（3）if 多分支语句

 <script>// 1. 用户输入let score = +prompt('请输入成绩：')// 2. 判断输出if (score >= 90) {alert('成绩优秀，宝贝，你是我的骄傲')} else if (score >= 70) {alert('成绩良好，宝贝，你要加油哦~~')} else if (score >= 60) {alert('成绩及格，宝贝，你很危险~')} else {alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')}</script>

2️⃣三元运算符

使用场景： 一些简单的双分支，可以使用 三元运算符，写起来比 if else双分支 更简单

条件 ? 表达式1 ： 表达式2

// 2. 执行过程 
// 2.1 如果条件为真，则执行表达式1
// 2.2 如果条件为假，则执行表达式2// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')// let age = 18 
// age = age + 1
//  age++// 1. 用户输入 
let num = prompt('请您输入一个数字:')
// 2. 判断输出- 小于10才补0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num
alert(num)

3️⃣switch语句

注意：

1. switch case 语句一般用于等值判断, if 适合于区间判断

1. switch case一般需要配合break关键字使用 没有break会造成case穿透

1. if 多分支语句开发要比switch更重要，使用也更多

// switch分支语句
// 1. 语法
// switch (表达式) {
//   case 值1:
//     代码1
//     break//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }<script>switch (2) {case 1:console.log('您选择的是1')break  // 退出switchcase 2:console.log('您选择的是2')break  // 退出switchcase 3:console.log('您选择的是3')break  // 退出switchdefault:console.log('没有符合条件的')}
</script>

4️⃣if 多分支和 switch区别：

switch…case 通常处理 case为确定值的情况

if…else… 通常用于范围判断

switch 必须是 === 全等，一定注意 数据类型

断点调试

浏览器打开调试界面

1. 按F12打开开发者工具

1. 点到源代码一栏 （ sources ）

1. 选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

5️⃣循环语句

（1）while循环

while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。

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

// while循环: 重复执行代码// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦，毕业时候见英雄'
let i = 1
while (i <= 3) {document.write('月薪过万不是梦，毕业时候见英雄~<br>')i++   // 这里千万不要忘了变量自增否则造成死循环
}

循环三要素：

1.初始值 （经常用变量）

2.终止条件

3.变量的变化量

<script>// // 1. 变量的起始值// let i = 1// // 2. 终止条件// while (i <= 3) {//   document.write('我要循环三次 <br>')//   // 3. 变量的变化量//   i++// }// 1. 变量的起始值let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {document.write('我要循环三次 <br>')// 3. 变量的变化量i++
}</script>

（2）中止循环

break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

continue 中止本次循环，一般用于排除或者跳过某一个选项的时候

<script>// let i = 1// while (i <= 5) {//   console.log(i)//   if (i === 3) {//     break  // 退出循环//   }//   i++// }let i = 1while (i <= 5) {if (i === 3) {i++continue}console.log(i)i++}</script>

（3）无限循环

1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）

2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。

// 无限循环  
// 需求： 页面会一直弹窗询问你爱我吗？
// (1). 如果用户输入的是 '爱'，则退出弹窗
// (2). 否则一直弹窗询问// 1. while(true) 无限循环
// while (true) {
//   let love = prompt('你爱我吗?')
//   if (love === '爱') {
//     break
//   }
// }// 2. for(;;) 无限循环
for (; ;) {let love = prompt('你爱我吗?')if (love === '爱') {break}
}

🎀综合案例-ATM存取款机

分析：

①：提示输入框写到循环里面（无限循环）

②：用户输入4则退出循环 break

③：提前准备一个金额预先存储一个数额 money

④：根据输入不同的值，做不同的操作

(1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额

(2) 可以使用 if else if 多分支 来执行不同的操作

完整代码：

<script>// 1. 开始循环 输入框写到 循环里面// 3. 准备一个总的金额let money = 100
while (true) {let re = +prompt(`
请您选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)// 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环if (re === 4) {break}// 4. 根据输入做操作switch (re) {case 1:// 存钱let cun = +prompt('请输入存款金额')money = money + cunbreakcase 2:// 存钱let qu = +prompt('请输入取款金额')money = money - qubreakcase 3:// 存钱alert(`您的银行卡余额是${money}`)break}
}
</script>