目录
![](https://i-blog.csdnimg.cn/blog_migrate/cf854ea22112af969d8852373727bc4d.png)
1 运算符
共五类: 一元运算符/算数运算符/比较运算符/逻辑运算符/赋值运算符
1.1 赋值运算符
目标: 能够使用赋值运算符简化代码
◇赋值运算符:对变量进行赋值的运算符
- 已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器
- 其他赋值运算符:
- +=
- 【+= 出现是为了简化代码, 比如让 let num = 10 ,num 加5 → num += 5】
- -=
- *=
- /=
- %=
- +=
◇使用这些运算符可以在对变量赋值时进行快速操作
1.2 一元运算符
目标: 能够使用一元运算符做自增运算
众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符
1 二元运算符:
二元:式中有两个数据(表达式)
2 一元运算符:
(适用于增减幅度为1的情况, 大于1 则使用赋值运算符)
◇正负号
![](https://i-blog.csdnimg.cn/blog_migrate/8fbd4d65fc073bd78d74ca477127e510.png)
◇ 自增:
- 符号:++
- 作用:让变量的值 +1
- 前置/后置
前置/后置自增就有区别了 - 1. 前置自增和后置自增独立使用时二者并没有差别!
- 2. 一般开发中我们都是独立使用
- 3. 后面 i++ 后置自增会使用相对较多,并且都是单独使用
- 面试题☆:
注意i++ 自增后i就变为2了(边输出边自增)
◇自减:
- 符号:--
- 作用:让变量的值 -1
- 使用场景:经常用于计数来使用。 比如进行10次操作,用它来计算进行了多少次了
1.3 比较运算符
1.3.1 比较运算符的介绍
-
使用场景:比较两个数据大小、是否相等
- 实际运用例子:
1.3.2 比较运算符
-
> : 左边是否大于右边
- <: 左边是否小于右边
- >=: 左边是否大于或等于右边
- <=: 左边是否小于或等于右边
- =: 左边是否大于或等于右边/单等赋值
- ==: 左右两边值是否相等
- ===: 左右两边是否类型和值都相等 (开发中判断是否相等,强烈推荐使用)
- !=: 左右两边是否不等
- !==: 左右两边是否不全等
- 比较结果为boolean类型,即只会得到 true 或 false
1.3.3 运算符使用
◇字符串比较,是比较的字符对应的ASCII码
- eg:"abc">"def"→65>68→false
- 从左往右依次比较
- 如果第一位一样再比较第二位,以此类推
- 比较的少,了解即可
◇NaN(not a number)不等于任何值,包括它本身(不用于比较判断)
- 涉及到"NaN“ 都是false
- typeof(NaN)→number
- console.log(NaN===NaN)//false
- NaN
◇null与undefined
- console.log(null==undefined)//true
- console.log(null===undefined)//false
◇尽量不要比较小数,因为小数有精度问题
- console.log(0.1+0.2===0.3)//false ∵0.1+0.2=0.30000000004
◇不同类型之间比较会发生隐式转换
- 最终把数据隐式转换转成number类型再比较
console.log(123=='123')//true //等号会让'123'变为Number123 因此相等,如此没有===严谨
- 所以开发中,如果进行准确的比较我们更喜欢 === 或者 !==
1.4 逻辑运算符
◇提问:如果我想判断一个变量 num 是否大于5且小于10,怎么办?
- 错误写法: 5 < num < 10
◇使用场景:逻辑运算符用来解决多重条件判断
- 正确写法: num > 5 && num < 10
◇逻辑运算符 (全真为真,一假则假) 优先级:非与或
-
console.log(!false)//true
练习 判断
逻辑的运算结果未必是布尔值(除非两边都是布尔值)
console.log(0 ? false : true)
运算方法(※):
① JS中的||符号:(第一个true就true)
只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。 只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。
总结:或-真前假后
②JS中的&&符号:(第二个true才true)
只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值; 只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;
总结:且-假前真后
练习 • 判断一个数是4的倍数,且不是100的倍数
需求:用户输入一个,判断这个数能被4整除,但是不能被100整除,满足条件,页面弹出true,否则弹出 false
分析: ①:用户输入 ②:判断条件, 看余数是不是0,如果是0就是能被整除,余数不是0,则不能被整除
let num=prompt('请输入数字:')
let four = +num%4
let ten=+num%10
alert(four===0 && ten!==0)
1.5 运算符优先级
目标:掌握运算符优先级,能判断运算符执行的顺序 【阔姨酸碧螺福豆】
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
练习:
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);
2 语句
2.1 表达式和语句
1 表达式
表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。
(检验方法:可以被console.log输出结果的,都是表达式)
包括:
◇字面量(100/'我是大佬'/true/[])
◇有运算符参与的运算
2 语句
语句是一段可以执行的代码。 比如: prompt() 可以弹出一个输入框,还有 if语句 for 循环语句等等
◇表达式和语句的区别
因为表达式可被求值,所以它可以写在赋值语句的右侧。
而语句不一定有值,所以比如 alert() for和break 等语句就不能被用于赋值。
2.2 分支语句
◇分支语句可以让我们有选择性的执行想要的代码
◇分支语句包含:
- If分支语句
- 三元运算符
- switch 语句
2.2.1 程序三大流程控制语句
-
以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构
- 有的时候要根据条件选择执行代码,这种就叫分支结构
- 某段代码被重复执行,就叫循环结构
2.2.2 if语句
if语句有三种使用:单分支、双分支、多分支
1 单分支使用语法
- 括号内的条件为true时,进入大括号里执行代码
- 小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
- 6个值是假:false\0\空字符串\NaN\undefined\null(false)
- 如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做~
2 双分支if语法
let num = prompt('请输入高考成绩')
if (+num >= 700) {
alert('恭喜考入清华大学')
}
else {
alert('回家去吧')
}
练习-判断用户登录案例
需求:用户输入,用户名:pink,密码:123456, 则提示登录成功,否则提示登录失败
let uname = prompt('请输入用户名')
let keyword = prompt('请输入密码')
if (uname ==='pink'&&keyword === '123456') {
alert('登陆成功')
}
else {
alert('登陆失败')
}
练习-判断闰年案例
需求:让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框
注:能被4整除但不能被100整除,或者被400整除的年份是闰年,否则都是平年
3 多分支if语句
使用场景: 适合于有多个结果的时候, 比如学习成绩可以分为: 优 良 中 差
释义:
- 先判断条件1,若满足条件1就执行代码1,其他不执行
- 若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
- 若依然不满足继续往下判断,依次类推 若以上条件都不满足,执行else里的代码n
2.2.3 三元运算符
◇使用场景: 其实是比 if 双分支 更简单的写法,可以使用 三元表达式
◇符号:? 与 : 配合使用
◇语法:
◇一般用来取值
案例 判断2个数的最大值
需求:用户输入2个数,控制台输出最大的值 分析: ①:用户输入2个数 ②:利用三元运算符输出最大值
let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
num1 > num2 ? alert(num1) : alert(num2)
or (后种为推荐写法)
let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
let num3 = num1 > num2 ? num1 : num2
alert(num3)
2.2.4 switch语句
释义:
- 找到跟小括号里数据全等的case值,并执行里面对应的代码
- 若没有全等 === 的则执行default里的代码
- 例:数据若跟值2全等,则执行代码2
注意事项:
1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用(每句都) 没有break会造成case穿透(即从条件满足的代码起,到break前每个代码都会执行,无论条件)
案例 简单计算器
需求:用户输入2个数字,然后输入 + - * / 任何一个,可以计算结果
分析: ①:用户输入数字 ②:用户输入不同算术运算符,可以去执行不同的运算 (switch)
let n1 = +prompt('请输入第一个数字')
let n2 = +prompt('请输入第二个数字')
let symbol = prompt('请输入算数运算符[+-*/]')
switch (symbol) {
case '+':
alert(`计算结果为${n1 + n2}`)
break
case '-':
alert(`计算结果为${n1 - n2}`)
break
case '*':
alert(`计算结果为${n1 * n2}`)
break
case '/':
alert(`计算结果为${n1 / n2}`)
break
default:
alert('输入有误')
break
}
案例-用户输入年份和月份,打印出这个月有多少天(★)
<script>
let days
let year = +prompt('请输入年份')
let month = +prompt('请输入月份')
switch (month) {
// 可以把条件写一起,再写执行代码
// 31天的月份
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
days = 31
break
// 30天的月份
case 7:
case 8:
case 10:
case 12:
days = 31
break
// 2月
case 2:
// 闰年
if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0) {
days = 29
}
// 平年
else {
days = 28
}
break
}
alert(`${year}的${month}月有${days}天`)
</script>
2.3 循环语句
2.3.1 断点调试
作用:学习时可以帮助更好的理解代码运行,工作时可以更快找到bug
◇浏览器打开调试界面
1. 按F12打开开发者工具
2. 点到sources一栏
3. 选择代码文件
◇断点:在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来
2.3.2 while 循环
while循环:在满足条件期间,重复执行某些代码。 比如我们运行相同的代码输出5次(输出5句 “我学的很棒”)
1 while 循环基本语法
释义:
- 循环条件为true才会进入循环体, 执行代码
- while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到 小括号判断条件,直到括号内条件不满足,即跳出
2 while 循环三要素
循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。
所以,while循环需要具备三要素:
1. 变量起始值
2. 终止条件(没有终止条件,循环会一直执行,造成死循环)
3. 变量变化量(用自增或者自减)
效果可用断点调试观察
练习1.页面输出1-100
let i =1
while(i<=100) {
document.write(`${i}<br>`)
i++
}
练习2. 计算从1加到100的总和并输出
let i=1
let sum=0
while (i<=100){
sum += i
i++
}
document.write (sum)
练习3. 计算1-100之间的所有偶数和
法一:
let i = 1
let even = 0
let sum = 0
while (i <= 100) {
even = i % 2 === 0 ? i : 0
sum = even + sum
i++
}
document.write(sum)
法二:
let i = 0
let sum = 0
while (i <= 100) {
if (i % 2 === 0) {
sum += i
}
i++
}
document.write(sum)
练习4 死循环判断
![](https://i-blog.csdnimg.cn/blog_migrate/609b309c354761993c9875599c91aa16.png)
依据:
- 只有条件为真且无终止条件,才会出现死循环.
- 0为六个假条件之一,所以不会死循环.
- 不为假,则为真.所以其它选项为真条件,但无终止条件.
2.3 循环退出
循环结束:(也是执行语句的一种)
- continue:结束本次循环,继续下次循环
- break:跳出所在的循环
◇ 区别:
- continue 退出本次循环,一般用于排除或者跳过某一个选项的时候, 可以使用continue
- break 退出整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用
练习-页面弹框
需求:页面弹出对话框,‘你爱我吗’,如果输入‘爱’,则结束,否则一直弹出对话框
分析:
①:循环条件永远为真,一直弹出对话框
②:循环的时候,重新让用户输入
③:如果用户输入的是: 爱,则退出循环 (break)
while (true) {
// 2 判断 满足条件 则break循环
let love = prompt('你爱我吗')
if (love === '爱') {
alert('真的吗?我不信')
break
}
}
3 综合案例-简易ATM取款机案例*
需求:用户可以选择存钱、取钱、查看余额和退出功能