开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
1、代码块
使用 {} 来创建代码块，代码块可以用来对代码进行分组，
同一个代码中的代码，就是同一组代码，一个代码块中的代码要么都执行要么都不执行
let 和 var
- 在JS中，使用let声明的变量具有块作用域
在代码块中声明的变量无法在代码块的外部访问
- 使用var声明的变量，不具有块作用域
{
var a = 10
}
输出方式：
console.log(`需要存${year}年，最终的钱数为${money}元！`)
2、if语句
流程控制语句可以用来改变程序执行的顺序 1. 条件判断语句 2. 条件分支语句 3. 循环语句
if语句 - 语法： if(条件表达式){ 语句... }
- 执行流程
- if语句在执行会先对if后的条件表达式进行求值判断，
- 如果结果为true，则执行if后的语句
- 如果为false则不执行
- if语句只会控制紧随其后其后的那一行代码，如果希望可以控制多行代码，可以使用{}将语句扩起来 最佳实践：即使if后只有1行代码，我们也应该编写代码块，这样结构会更加的清晰 如果if后的添加表达式不是布尔值，会转换为布尔值然后再运算
<script>
if(false)
alert('哈哈哈')
let a = 10
if(a > 10){
alert('a比10大')
}
// if(100){
// alert('你猜我执行吗？')
// }
if(a == 10){
alert('a的值是10！')
}
</script>
3、if-else
if-else语句
- 语法： if(条件表达式){ 语句... }else{ 语句... }
- 执行流程： if-else执行时，先对条件表达式进行求值判断， 如果结果为true 则执行if后的语句 如果结果为false 则执行else后的语句
if-else if-else语句：
-
语法： if(条件表达式){ 语句... }else if(条件表达式){ 语句... }else if(条件表达式){ 语句... }else if(条件表达式){ 语句... }else{ 语句... }
-
执行流程： if-else if-else语句，会自上向下依次对if后的条件表达式进行求值判断， 如果条件表达式结果为true，则执行当前if后的语句，执行完毕语句结束 如果条件表达式结果为false，则继续向下判断，直到找到true为止 如果所有的条件表达式都是false，则执行else后的语句
注意： if-else if-else语句中只会有一个代码块被执行， 一旦有执行的代码块，下边的条件都不会在继续判断了 所以一定要注意，条件的编写顺序
prompt() 可以用来获取用户输入的内容
它会将用户输入的内容以字符串的形式返回，可以通过变量来接收
// prompt() 可以用来获取用户输入的内容
// 它会将用户输入的内容以字符串的形式返回，可以通过变量来接收
let num = +prompt("请输入一个整数：")
alert(typeof num)
<script>
if(age >= 18 && age < 30){
alert('你已经成年了！')
}else if(age >= 30 && age < 60){
alert('你已经步入中年了！')
}else if(age >= 60){
alert('你已经退休了！')
}
</script>
练习1
<script>
/*
- 练习1：
编写一个程序，获取一个用户输入的整数。然后通过程序显示这个数是奇数还是偶数。
*/
// 编写一个程序，获取一个用户输入的整数
// let num = +prompt("请输入一个整数")
let num = parseInt(prompt("请输入一个整数"))
// 验证一下，用户的输入是否合法，只有是有效数字时，我们才检查它是否是偶数
// 我们不能使用==或===来检查一个值是否是NaN
// 可以使用isNaN()函数来检查一个值是否是NaN
if (isNaN(num)) {
alert("你的输入有问题，请输入整数！")
} else {
// 然后通过程序显示这个数是奇数还是偶数。
if (num % 2 === 0) {
alert(`${num} 是偶数！`)
} else {
alert(`${num} 是奇数！`)
}
}
</script>
练习2
<script>
/*
- 练习1：
编写一个程序，获取一个用户输入的整数。然后通过程序显示这个数是奇数还是偶数。
*/
// 编写一个程序，获取一个用户输入的整数
// let num = +prompt("请输入一个整数")
let num = parseInt(prompt("请输入一个整数"))
// 验证一下，用户的输入是否合法，只有是有效数字时，我们才检查它是否是偶数
// 我们不能使用==或===来检查一个值是否是NaN
// 可以使用isNaN()函数来检查一个值是否是NaN
if (isNaN(num) || num % 1 !== 0) {
alert("你的输入有问题，请输入整数！")
} else {
// 然后通过程序显示这个数是奇数还是偶数。
if (num % 2 === 0) {
alert(`${num} 是偶数！`)
} else {
alert(`${num} 是奇数！`)
}
}
</script>
练习3
<script>
/*
- 练习3：
大家都知道，男大当婚，女大当嫁。那么女方家长要嫁女儿，当然要提出一定的条件：
高：180cm以上; 富:1000万以上; 帅:500以上;
如果这三个条件同时满足，则:'我一定要嫁给他'
如果三个条件有为真的情况，则:'嫁吧，比上不足，比下有余。'
如果三个条件都不满足，则:'不嫁！'
*/
// 获取男生的数据（身高、财富、颜值）
let height = +prompt('请输入你的身高（厘米）：')
let money = +prompt('请输入你的身价（万）：')
let face = +prompt('请输入你的颜值（像素）：')
// height 180↑ money 1000↑ face 500↑
if(height>180 && money>1000 && face>500){
// 如果这三个条件同时满足，则:'我一定要嫁给他'
alert('我一定要嫁给他！')
}else if(height>180 || money>1000 || face>500){
// 如果三个条件有为真的情况，则:'嫁吧，比上不足，比下有余。'
alert('嫁吧，比上不足，比下有余。')
}else{
// 如果三个条件都不满足，则:'不嫁！'
alert('不嫁！')
}
</script>
4、switch语句
switch语句
- 语法： switch(表达式){ case 表达式: 代码... break case 表达式: 代码... break case 表达式: 代码... break case 表达式: 代码... break default: 代码... break }
- 执行的流程 switch语句在执行时，会依次将switch后的表达式和case后的表达式进行全等比较 如果比较结果为true，则自当前case处开始执行代码 如果比较结果为false，则继续比较其他case后的表达式，直到找到true为止 如果所有的比较都是false，则执行default后的语句
- 注意： 当比较结果为true时，会从当前case处开始执行代码 也就是说case是代码执行的起始位置 这就意味着只要是当前case后的代码，都会执行 可以使用break来避免执行其他的case
- 总结 switch语句和if语句的功能是重复，switch能做的事if也能做，反之亦然。 它们最大的不同在于，switch在多个全等判断时，结构比较清晰
<script>
// 根据用户输入的数字显示中文
let num = +prompt("请输入一个数字")
/*
1 壹
2 贰
3 叁
*/
// if (num === 1) {
// alert("壹")
// } else if (num === 2) {
// alert("贰")
// } else if (num === 3) {
// alert("叁")
// }
switch (num) {
case 1:
alert("壹")
break // break可以用来结束switch语句
case 2:
alert("贰")
break
case 3:
alert("叁")
break
default:
alert("我是default")
break
}
</script>
5、循环语句
循环语句
-
通过循环语句可以使指定的代码反复执行
-
JS中一共有三种循环语句 while语句 do-while语句 for语句
-
while语句
- 语法： while(条件表达式){ 语句... }
- 执行流程： while语句在执行时，会先对条件表达式进行判断， 如果结果为true，则执行循环体，执行完毕，继续判断 如果为true，则再次执行循环体，执行完毕，继续判断，如此重复 知道条件表达式结果为false时，循环结束
通常编写一个循环，要有三个要件
-
初始化表达式（初始化变量）
-
条件表达式（设置循环运行的条件）
-
更新表单式（修改初始化变量）
// 当一个循环的条件表达式恒为true时，这个循环就是一个死循环，会一直执行（慎用）
// while(true){
// alert('哈哈')
// }
<script>
// 初始化表达式
// let a = 0
// // 条件表达式
// while(a < 3){
// console.log(a)
// // 更新表达式
// a++
// }
let i = 0
while(1){
console.log(i)
i++
if(i >= 5){
break
}
}
</script>
练习
<script>
/*
练习：
假设银行存款的年利率为5%，问1000块存多少年可以变成5000块
*/
// 创建一个变量表示钱数
let money = 1000
// 1000 存一年是多少钱？
// money *= 1.05
// money *= 1.05
// money *= 1.05
// 创建一个计数器来记录循环执行的次数
let year = 0
// 编写循环，计算存款的年数
while(money < 5000){
money *= 1.05 // 循环没执行一次，就相当于钱存了一年
year++
}
console.log(`需要存${year}年，最终的钱数为${money}元！`)
</script>
6、do-while循环
do-while循环
- 语法：
do{
语句...
}while(条件表达式)
- 执行顺序：
do-while语句在执行时，会先执行do后的循环体，
执行完毕后，会对while后的条件表达式进行判断
如果为false，则循环终止
如果为true，则继续执行循环体，以此类推
和while的区别：
while语句是先判断再执行
do-while语句是先执行再判断
实质的区别：
do-while语句可以确保循环至少执行一次
<script>
let i = 10
do{
console.log(i)
i++
}while(i < 5)
</script>
7、for循环
原始循环---for( ; ; )
for循环
- for循环和while没有本质区别，都是用来反复执行代码
- 不同点就是语法结构，for循环更加清晰
- 语法： for(①初始化表达式; ②条件表达式; ④更新表达式){ ③语句... }
- 执行流程： ① 执行初始化表达式，初始化变量 ② 执行条件表达式，判断循环是否执行（true执行，false终止） ③ 判断结果为true，则执行循环体 ④ 执行更新表达式，对初始化变量进行修改 ⑤ 重复②，知道判断为false为止
- 初始化表达式，在循环的整个的生命周期中只会执行1次
- for循环中的三个表达式都可以省略
- 使用let在for循环的()中声明的变量是局部变量，只能在for循环内部访问 使用var在for循环的()中声明的变量可以在for循环的外部访问
- 创建死循环的方式： while(1){} for(;;){}
for(let i=0; i<5; i++){
console.log(i)
}
