1. 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码块</title>
</head>
<body>
<script>
/*
使用 {} 来创建代码块，可以用来将代码分组
- 同一个代码块中的代码，要么都执行，要么都不执行
let和var
- 使用let声明的变量具有块作用域，无法在代码块之外访问到
- 使用var声明的变量不具有作用域
*/
{
let a = 1
}
// console.log(a) //Uncaught ReferenceError: a is not defined
{
var b = 3
}
console.log(b) //3
</script>
</body>
</html>
2. if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if语句</title>
</head>
<body>
<script>
/*
流程控制语句可以用来改变程序执行的顺序
1.条件判断语句
2.条件分支语句
3.循环语句
*/
/*
if语句
- 语法：
if (条件表达式) {
语句
}
- 执行流程：
if语句在执行前会先对if后的条件表达式进行求值判断，如果为true，则执行if后的语句，反之不执行
*/
let a = 1
let b = 2
if (a > b) {
console.log('条件表达式成立！')
}
//if语句只会空值紧随其后的那一行代码，如果希望控制多行代码，使用{}代码块
//if (a > b)
// console.log('a > b 成立')
// console.log('a和b比较大小')
//一般情况下，if语句建议写完整写法
if (a > b) {
console.log('a > b 成立')
console.log('a和b比较大小')
}
//如果表达式中的值不是布尔值，会先进行类型转换，再做判断
if (100) {
console.log('if (100) 表达式为真')
}
</script>
</body>
</html>
3. if-else语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if-else语句</title>
</head>
<body>
<script>
/*
if-else语句：
- 语法：
if (条件表达式) {
语句
} else {
语句
}
- 执行流程：
if语句在执行前会先对if后的条件表达式进行求值判断
如果为true，则执行if后的语句
反之执行else中的语句
*/
let score = 90
if (score >= 90) {
console.log('成绩优秀！')
} else {
console.log('成绩良好！')
}
/*
if-else if-else语句：
- 语法：
if (条件表达式1) {
语句
} else if (条件表达式2) {
语句
} else if (条件表达式3) {
语句
} else if (条件表达式4) {
语句
......
} else {
语句
}
- 执行流程：
- 自上而下的依次对if后的条件表达式进行求职判断
- 如果为true，则执行当前if后的语句，执行完则语句结束
- 反之，会继续向下判断，直至找到true为止
- 如果所有表达式都为false，则执行else中的语句
- 注：不论有多少个if-else if-else，该语句中只会有一个代码块被执行
*/
let age = 66
if (age >= 90) {
console.log('耄耋');
} else if (age >= 80 && age < 90) {
console.log('寿伞')
} else if (age >= 70 && age < 80) {
console.log('古稀')
} else if (age >= 60 && age < 70) {
console.log('还历')
} else if (age >= 50 && age < 60) {
console.log('知天命')
} else if (age >= 40 && age < 50) {
console.log('不惑')
} else if (age >= 30 && age < 40) {
console.log('而立')
} else if (age >= 20 && age < 30) {
console.log('加冠')
} else {
console.log('......')
}
</script>
</body>
</html>
4. switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>switch语句</title>
</head>
<body>
<script>
/*
switch语句：
- 语法：
switch (表达式) {
case 表达式:
...
case 表达式:
...
case 表达式:
...
}
- 执行的顺序：
在执行时会依次将switch后的表达式和case后的表达式进行全等判断
如果比较结果为true，则执行当前这个case后的代码
如果比较结果为false，则继续比较其他case后的表达式，直到找到true为止
注：需注意case穿透问题，不要忘了写break
*/
//根据用户输入的数字显示中文
let num = +prompt('请输入一个数字')
switch (num) {
case 1:
alert('一')
break
case 2:
alert('二')
break
case 3:
alert('三')
break
default:
alert('暂时不能判断！')
break
}
</script>
</body>
</html>
5. 循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>循环语句</title>
</head>
<body>
<script>
/*
循环语句：
- 可以使指定的代码反复执行
- js中的三种循环语句：while语句，do-while语句，for语句
- while语句：
- 语法：
while (条件表达式) {
......
}
- 执行流程：
先对条件表达式进行判断
如果为true，则执行循环体，执行完之后继续对条件表达式进行判断
如果为true则重复上述步骤，直到条件表达式为false时停止，此时循环结束
*/
/*
一般情况下，编写循环时需要三个条件：
1. 初始表达式
2. 条件表达式
3. 更新表达式
*/
//let a = 1
//while (a < 10) {
// console.log('执行循环体', a)
// a++
//}
//console.log('循环结束')
let b = 1
while (true) {
if (b > 5) {
break
}
console.log('执行循环体', b)
b++
}
console.log('循环结束')
</script>
</body>
</html>
6. do-while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>do-while循环</title>
</head>
<body>
<script>
/*
do-while循环:
- 语法：
do {
......
} while (条件表达式)
- 执行顺序：
先执行do后的循环体，再进行while后的条件表达式判断
如果为true，则重复上述步骤
如果为false，则循环终止
- 与while的区别：
while 先判断再执行
do-while 先执行再判断
实质区别：do-while可以确保循环至少执行一次
*/
let a = 1
do {
console.log('执行循环体', a)
a++
} while (a < 5)
console.log('循环执行结束')
</script>
</body>
</html>
7. for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>for循环</title>
</head>
<body>
<script>
/*
for循环：
- 语法：
for (初始化表达式; 条件表达式; 更新表达式) {
......
}
- 执行顺序：
1. 初始化变量
2. 执行条件表达式，判断循环是否执行
3. 条件表达式如果为true，则执行循环语句
4. 更新表达式
5. 重复步骤2，直到条件表达式的值为false
- 注：
初始化表达式在整个循环中，只会执行依次
for循环中的三个表达式都可以省略（此时为死循环，没有循环结束节点）
使用let初始化的变量是局部变量
*/
for (let i = 0; i < 10; i++) {
console.log(`第${i}次循环`)
}
//创建死循环的方式
//while (true) {}
//for (;;) {}
</script>
</body>
</html>
8. 循环嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>循环嵌套</title>
</head>
<body>
<script>
/*
循环嵌套：在一个循环中嵌套其他的循环
*/
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (j <= i) {
document.write("* ")
}
}
document.write("<br>");
}
/*
输出结果：
*
* *
* * *
* * * *
* * * * *
*/
</script>
</body>
</html>
9. break和continue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break和continue</title>
</head>
<body>
<script>
/*
break:
- 用来终止switch和循环语句
- 终止离他最近的循环
*/
for (let i = 0; i < 5; i++) {
console.log('外层循环', i)
for (let j = 0; j < 5; j++) {
console.log('内层循环', j)
if (j === 2) {
break
}
}
console.log('--------------------')
}
/*
continue：
用来跳过当前的这次循环
*/
for (let i = 0; i < 5; i++) {
if (i === 3) {
continue
}
console.log('continue循环测试', i)
}
</script>
</body>
</html>
评论 (0)