JavaScript 基础(2) - 笔记
理解什么是流程控制,知道条件控制的种类并掌握其对应的语法规则,具备利用循环编写简易ATM取款机程序能力
1 运算符
1.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
1.2 赋值运算符
赋值运算符:对变量进行赋值的运算符
=
将等号右边的值赋予给左边,要求左边必须是一个容器
运算符 | 作用 |
---|---|
+= | 加法赋值 |
-+ | 减法赋值 |
*= | 乘法赋值 |
/= | 除法赋值 |
%= | 取余赋值 |
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num) // 4
1.3 自增/自减运算符
符号 | 作用 | 说明 |
---|---|---|
++ | 自增 | 变量自身的值加1,例如: x++ |
-- | 自减 | 变量自身的值减1,例如: x-- |
- ++在前和++在后在单独使用时二者并没有差别,而且一般开发中我们都是独立使用
- ++在后(后缀式)我们会使用更多
注意:
- 只有变量能够使用自增和自减运算符
- ++、-- 可以在变量前面也可以在变量后面,比如: x++ 或者 ++x
<script>
// let num = 10
// num = num + 1
// num += 1
// // 1. 前置自增
// let i = 1
// ++i
// console.log(i)
// let i = 1
// console.log(++i + 1)
// 2. 后置自增
// let i = 1
// i++
// console.log(i)
// let i = 1
// console.log(i++ + 1)
// 了解
let i = 1
console.log(i++ + ++i + i)
</script>
1.4 比较运算符
使用场景:比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)。
运算符 | 作用 |
---|---|
> | 左边是否大于右边 |
< | 左边是否小于右边 |
>= | 左边是否大于或等于右边 |
<= | 左边是否小于或等于右边 |
=== | 左右两边是否类型 和值 都相等(重点) |
== | 左右两边值 是否相等 |
!= | 左右值不相等 |
!== | 左右两边是否不全等 |
对比:
=
单等是赋值==
是判断===
是全等- 开发中判断是否相等,强烈推荐使用
===
- 涉及到
NaN
都是 false
<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') // true
console.log('aa' < 'ab') // true
console.log('aa' < 'aac') // true
console.log('-------------------------')
</script>
1.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) // true
console.log(false && true) // false
console.log(3 < 5 && 3 > 2) // true
console.log(3 < 5 && 3 < 2) // false
console.log('---------------')
// 逻辑或 一真则真
console.log(true || true) // true
console.log(false || true) // true
console.log(false || false) // false
console.log('---------------')
// 逻辑非 取反
console.log(!true) // false
console.log(!false) // true
console.log('---------------')
let num = 6
console.log(num > 5 && num < 10)
console.log('-----------------')
</script>
1.6 练习:判断一个数是4的倍数,且不是100的倍数
需求:用户输入一个数,判断这个数能被4整除,但是不能被100整除,满足条件,页面弹出true,否则弹出false。
分析:
- 用户输入。
- 判断条件,看余数是不是0,如果是0就是能被整除,余数不是0,则不能被整除。
// 1.用户输入
let num = +prompt('请输入一个数字:')
// 2.弹出结果
alert(num % 4 === 0 && num % 100 !== 0)
1.7 运算符优先级
优先级 | 运算符 | 顺序 | ||
---|---|---|---|---|
1 | 小括号 | () | ||
2 | 一元运算符 | ++ -- ! | ||
3 | 算数运算符 | 先 * / % 后 + - | ||
4 | 关系运算符 | > >= < <= | ||
5 | 相等运算符 | == != === !== |
||
6 | 逻辑运算符 | **先 && 后 \ | \ | ** |
7 | 赋值运算符 | = | ||
8 | 逗号运算符 | , |
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
逻辑运算符优先级: !> && > ||
2 语句
2.1 表达式和语句
区别:
表达式:因为表达式可被求值,所以它可以写在赋值语句的右侧。
- 表达式
num =3+4
语句:而语句不一定有值,所以比如alert()for和break等语句就不能被用于赋值。
- 语句
alert()
弹出对话框console.log()
控制台打印输出
某些情况,也可以把表达式理解为表达式语句,因为它是在计算结果,但不是必须的成分(例如continue语句)。
2.2 分支语句
分支语句可以根据条件判定真假,来选择性的执行想要的代码。
分支语句包含:
- if分支语句(重点)
- 三元运算符
- switch语句
2.2.1 if 分支语句
语法:
if(条件表达式) {
// 满足条件要执行的语句
}
- 小括号内的条件结果是布尔值,为 true 时,进入大括号里执行代码;为false,则不执行大括号里面代码
- 小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔值,类似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('恭喜考过700分')
}
console.log('-----------------')
</script>
2.2.2 if 双分支语句
如果有两个条件的时候,可以使用 if else 双分支语句
if (条件表达式){
// 满足条件要执行的语句
} else {
// 不满足条件要执行的语句
}
例如:
<script>
// 1. 用户输入
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
// 2. 判断输出
if (uname === '尘缘' && pwd === '123456') {
alert('恭喜登录成功')
} else {
alert('用户名或者密码错误')
}
</script>
练习:判断闰年案例
需求:让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框。
分析:
- 能被4整除但不能被100整除,或者被400整除的年份是闰年,否则都是平年。
- 需要逻辑运算符。
<script>
// 1.用户输入
let year = +prompt('请输入年份:')
// 2.判断输出
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert(`${
year}年是闰年`)
} else {
alert(`${
year}年是平年`)
}
</script>
2.2.3 if 多分支语句
使用场景: 适合于有多个条件的时候。
练习:输入成绩案例
需求:根据输入不同的成绩,反馈不同的评价。
注:
- 成绩90以上是 优秀
- 成绩70~90是 良好
- 成绩是60~70之间是 及格
- 成绩60分以下是 不及格
<script>
// 1. 用户输入
let score = +prompt('请输入成绩:')
// 2. 判断输出
if (score >= 90) {
alert('成绩优秀,宝贝,你是我的骄傲')
} else if (score >= 70) {
alert('成绩良好,宝贝,你要加油哦~~')
} else if (score >= 60) {
alert('成绩及格,宝贝,你很危险~')
} else {
alert('成绩不及格,宝贝,我不想和你说话,我只想用鞭子和你说话~')
}
</script>
2.2.4 三元运算符(三元表达式)
使用场景: 一些简单的双分支,可以使用 三元运算符(三元表达式),写起来比 if else双分支 更简单
符号:? 与 : 配合使用
语法:
条件 ? 表达式1 : 表达式2
案例:判断2个数的最大值
需求:用户输入2个数,控制台输出最大的值。
分析:
- 用户输入2个数。
- 利用三元运算符输出最大值。
// 1.用户输入
let num1 = +prompt('请您输入第一个数:')
let num2 = +prompt('请您输入第二个数:')
// 2.判断输出-三元运算符
// if (num1 > num2) {
// alert(num1)
// } else {
// alert(num2)
// }
num1 > num2 ? alert(`最大值是:${num1}`) : alert(`最大值是:${num2}`)
案例:数字补0
需求:用户输入1个数,如果数字小于10,则前面进行补0,比如 09 03 等。
分析:
- 为后期页面显示时间做铺垫。
- 利用三元运算符 补 0 计算。
// 三元运算符(三元表达式)
// 1. 语法格式
// 条件 ? 表达式1 : 表达式2
// 2. 执行过程
// 2.1 如果条件为真,则执行表达式1
// 2.2 如果条件为假,则执行表达式2
// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')
// let age = 18
// age = age + 1
// 1.用户输入
let num = +prompt('请您输入一个数字:')
// 2.判断输出- 小于10才补0
// num = num < 10 ? '0' + num : num
num = num >= 10 ? num : '0' + num
alert(num)
2.2.5 switch语句(了解)
使用场景: 适合于有多个条件的时候,也属于分支语句,大部分情况下和 if多分支语句 功能相同。
注意:
- switch case语句一般用于等值判断,if适合于区间判断。
- switch case一般需要配合break关键字使用 没有break会造成case穿透。
- if 多分支语句开发要比switch更重要,使用也更多。
例如:
// switch分支语句
// 1. 语法
// switch (表达式) {
// case 值1:
// 代码1
// break
// case 值2:
// 代码2
// break
// ...
// default:
// 代码n
// }
switch (1) {
case 1:
console.log('您选择的是1')
break // 退出switch
case 2:
console.log('您选择的是2')
break // 退出switch
case 3:
console.log('您选择的是3')
break // 退出switch
default:
console.log('没有符合条件的')
break
}
案例:简单计算器
需求:用户输入2个数字,然后输入 + - * /
任何一个,可以计算结果。
分析:
- 用户输入数字。
- 用户输入不同算术运算符,可以去执行不同的运算(switch)。
// 1.用户输入 2个数字 + 操作符号 + - * /
let num1 = +prompt('请您输入第一个数字:')
let num2 = +prompt('请您输入第二个数字:')
let sp = prompt('请您输入 + - * / 其中一个:')
// 2.判断输出
switch (sp) {
case '+':
alert(`两个数的加法操作是${
num1 + num2}`)
break
case '-':
alert(`两个数的减法操作是${
num1 - num2}`)
break
case '*':
alert(`两个数的乘法操作是${
num1 * num2}`)
break
case '/':
alert(`两个数的除法操作是${
num1 / num2}`)
break
default:
alert(`请输入+ - * /`)
break
}
2.3 循环语句
2.3.1 断点调试
作用:学习时可以帮助更好的理解代码运行,工作时可以更快找到bug
浏览器打开调试界面
- 按
F12
打开开发者工具 - 点到源代码一栏 ( sources )
- 选择代码文件
断点:在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来。
2.3.2 while循环
while : 在…. 期间, 所以 while循环 就是在满足条件期间,重复执行某些代码。
1.语法:
while (条件表达式) {
要重复执行的代码(循环体)
}
释义:
- 跟if语句很像,都要满足小括号里的条件为true才会进入 循环体 执行代码。
- while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出。
例如:
// while循环: 重复执行代码
// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦,毕业时候见英雄'
let i = 1
while (i <= 3) {
document.write('月薪过万不是梦,毕业时候见英雄~<br>')
i++ // 这里千万不要忘了变量自增否则造成死循环
}
2.while 循环三要素
循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。
循环三要素:
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>
练习:while 练习
需求:使用while循环,页面中打印,可以添加换行效果。
页面输出1-100
- 核心思路:利用 i ,因为正好和 数字对应。
// 1.页面输出1~100 let i = 1 while (i <= 100) { document.write(`这是第${ i}个数<br>`) i++ }
计算从1加到100的总和并输出
- 核心思路:
- 声明累加和的变量 sum
- 每次把 i 加到 sum 里面
// 2.页面输出1~100 累加和 let i = 1 // 变量的起始值 let sum = 0 // 累加和变量 while (i <= 100) { // sum = sum + i sum += i i++ } console.log(sum) // 5050
- 核心思路:
计算1-100之间的所有偶数和
- 核心思路:
- 声明累加和的变量 sum
- 首先利用if语句把 i 里面是偶数筛选出来
- 把 筛选的 i 加到 sum 里面
// 3.页面输出1~100 偶数和 let i = 1 let sum = 0 while (i <= 100) { // 筛选偶数 if (i % 2 === 0) { sum = sum + i } // 每次循环都要自加 i++ } console.log(sum) // 2550
- 核心思路:
2.4 循环退出
2.4.1 中止循环
break
中止整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用(提高效率)
continue
中止本次循环,一般用于排除或者跳过某一个选项的时候
// 打印5句话
// let i = 1
// while (i <= 5) {
// if (i === 3) {
// break // 退出整个循环
// }
// console.log(`我要吃${i}个包子`)
// i++
// }
let i = 1
while (i <= 5) {
if (i === 3) {
i++
continue // 结束本次循环
}
console.log(`我要吃${
i}个包子`)
}
2.4.2 无限循环
1.while(true)
来构造“无限”循环,需要使用break退出循环。(常用)
2.for(;;)
也可以来构造“无限”循环,同样需要使用break退出循环。
案例:页面弹框
需求:页面弹出对话框,’你爱我吗‘,如果输入’爱‘,则结束,否则一直弹出对话框。
分析:
- 循环条件永远为真,一直弹出对话框。
- 循环的时候,重新让用户输入。
- 如果用户输入的是:爱,则退出循环(break)。
// 无限循环
// 需求: 页面会一直弹窗询问你爱我吗?
// (1). 如果用户输入的是 '爱',则退出弹窗
// (2). 否则一直弹窗询问
// 1. while(true) 无限循环
// while (true) {
// let love = prompt('你爱我吗?')
// if (love === '爱') {
// break
// }
// }
// 2. for(;;) 无限循环
for (; ;) {
let love = prompt('你爱我吗?')
if (love === '爱') {
break
}
}
3 综合案例-ATM存取款机
需求:用户可以选择存钱、取钱、查看余额和退出功能。
分析:
①:提示输入框写到循环里面(无限循环)
②:用户输入4则退出循环 break
③:提前准备一个金额预先存储一个数额 money
④:根据输入不同的值,做不同的操作
(1) 取钱则是减法操作, 存钱则是加法操作,查看余额则是直接显示金额
(2) 可以使用 if else if 多分支 来执行不同的操作
完整代码:
// 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 += cun
break
case 2:
// 取钱
let qu = +prompt('请输入取款金额')
money -= qu
break
case 3:
// 存钱
alert(`您的银行卡余额是${
money}`)
break
}
}