前端JavaScriptJavaScript 学习笔记（2）：运算符、语句与综合案例
woodfish
理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力
运算符
算术运算符
数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
| 运算符 |
作用 |
| + |
求和 |
| - |
求差 |
| * |
求积 |
| / |
求商 |
| % |
取模（取余数），开发中经常用于作为某个数字是否被整除 |
注意：在计算失败时，显示的结果是 NaN （not a number）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
console.log(1 + 2 * 3 / 2)
let num = 10
console.log(num + 10)
console.log(num + num)
console.log(4 % 2)
console.log(6 % 3)
console.log(5 % 3)
console.log(3 % 5)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2)
|
赋值运算符
赋值运算符：对变量进行赋值的运算符
= 将等号右边的值赋予给左边, 要求左边必须是一个容器
| 运算符 |
作用 |
| += |
加法赋值 |
| -+ |
减法赋值 |
| *= |
乘法赋值 |
| /= |
除法赋值 |
| %= |
取余赋值 |
1
2
3
4
5
6
7
8
| <script>
let num = 1
num += 3
console.log(num)
</script>
|
自增/自减运算符
| 符号 |
作用 |
说明 |
| ++ |
自增 |
变量自身的值加1，例如: x++ |
| – |
自减 |
变量自身的值减1，例如: x– |
- ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用
- ++在后（后缀式）我们会使用更多
注意：
- 只有变量能够使用自增和自减运算符
- ++、– 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <script>
let i = 1
console.log(i++ + ++i + i)
</script>
|
比较运算符
使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）
| 运算符 |
作用 |
| > |
左边是否大于右边 |
| < |
左边是否小于右边 |
| >= |
左边是否大于或等于右边 |
| <= |
左边是否小于或等于右边 |
| === |
左右两边是否类型和值都相等（重点） |
| == |
左右两边值是否相等 |
| != |
左右值不相等 |
| !== |
左右两边是否不全等 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
console.log(2 == '2')
console.log(2 === '2')
console.log(NaN === NaN)
console.log(2 !== '2')
console.log(2 != '2')
console.log('-------------------------')
console.log('a' < 'b')
console.log('aa' < 'ab')
console.log('aa' < 'aac')
console.log('-------------------------')
</script>
|
逻辑运算符
使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值
| 符号 |
名称 |
日常读法 |
特点 |
口诀 |
| && |
逻辑与 |
并且 |
符号两边有一个假的结果为假 |
一假则假 |
| || |
逻辑或 |
或者 |
符号两边有一个真的结果为真 |
一真则真 |
| ! |
逻辑非 |
取反 |
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 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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 = 6
console.log(num > 5 && num < 10)
console.log('-----------------')
</script>
|
语句
表达式和语句
分支语句
分支语句可以根据条件判定真假，来选择性的执行想要的代码
分支语句包含：
- if分支语句（重点）
- 三元运算符
- switch语句
if 分支语句
语法：
小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码
小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()
如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <script>
let score = +prompt('请输入成绩')
if (score >= 700) {
alert('恭喜考入黑马程序员')
}
console.log('-----------------')
</script>
|
if双分支语句
如果有两个条件的时候，可以使用 if else 双分支语句
1
2
3
4
5
| if (条件表达式){
} else {
}
|
例如：
1
2
3
4
5
6
7
8
9
10
11
| <script>
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
if (uname === 'pink' && pwd === '123456') {
alert('恭喜登录成功')
} else {
alert('用户名或者密码错误')
}
</script>
|
if 多分支语句
使用场景： 适合于有多个条件的时候
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
let score = +prompt('请输入成绩：')
if (score >= 90) {
alert('成绩优秀，宝贝，你是我的骄傲')
} else if (score >= 70) {
alert('成绩良好，宝贝，你要加油哦~~')
} else if (score >= 60) {
alert('成绩及格，宝贝，你很危险~')
} else {
alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')
}
</script>
|
三元运算符（三元表达式）
使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单
符号：? 与 : 配合使用
语法：
例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
console.log(5 < 3 ? '真的' : '假的')
let num = prompt('请您输入一个数字:')
num = num >= 10 ? num : 0 + num
alert(num)
|
switch语句（了解）
使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同
注意：
- switch case语句一般用于等值判断, if适合于区间判断
- switchcase一般需要配合break关键字使用 没有break会造成case穿透
- if 多分支语句开发要比switch更重要，使用也更多
例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<script>
switch (2) {
case 1:
console.log('您选择的是1')
break
case 2:
console.log('您选择的是2')
break
case 3:
console.log('您选择的是3')
break
default:
console.log('没有符合条件的')
}
</script>
|
断点调试
作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面
- 按F12打开开发者工具
- 点到源代码一栏 （ sources ）
- 选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来
循环语句
使用场景：重复执行 指定的一段代码，比如我们想要输出10次 ‘我学的很棒’
学习路径：
1.while循环
2.for 循环（重点）
while循环
while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。
语法：
例如：
1
2
3
4
5
6
7
8
|
let i = 1
while (i <= 3) {
document.write('月薪过万不是梦，毕业时候见英雄~<br>')
i++
}
|
循环三要素：
1.初始值 （经常用变量）
2.终止条件
3.变量的变化量
例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script>
let end = +prompt('请输入次数:')
let i = 1
while (i <= end) {
document.write('我要循环三次 <br>')
i++
}
</script>
|
中止循环
break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）
continue 中止本次循环，一般用于排除或者跳过某一个选项的时候
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <script>
let i = 1
while (i <= 5) {
if (i === 3) {
i++
continue
}
console.log(i)
i++
}
</script>
|
无限循环
1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）
2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
for (; ;) {
let love = prompt('你爱我吗?')
if (love === '爱') {
break
}
}
|
综合案例-ATM存取款机
分析：
①：提示输入框写到循环里面（无限循环）
②：用户输入4则退出循环 break
③：提前准备一个金额预先存储一个数额 money
④：根据输入不同的值，做不同的操作
(1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额
(2) 可以使用 if else if 多分支 来执行不同的操作
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <script>
let money = 100
while (true) {
let re = +prompt(`
请您选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)
if (re === 4) {
break
}
switch (re) {
case 1:
let cun = +prompt('请输入存款金额')
money = money + cun
break
case 2:
let qu = +prompt('请输入取款金额')
money = money - qu
break
case 3:
alert(`您的银行卡余额是${money}`)
break
}
}
</script>
|
本文搬运
