JavaScript编程的三大结构
编程的三大结构
- 顺序结构
- 选择结构
- 循环结构
1、顺序结构
- 顺序结构式从上到下执行，JavaScript默认情况下是顺序结构
2、选择结构
（1）if 判断
应用场景
- 主要用于范围判断
1) 单分支案例
① 语法格式：
//如果分数大于等于60，则输出成绩及格
let score = 90;
if (条件表达式){
//满足条件执行;
}
② 示例：
<script>
let score = 90;
if (score >= 60){
alert(`成绩及格`);
}
</script>
③ 运行效果
2) 双分支案例
① 语法格式：
//如果分数大于等于60，则输出成绩及格，否则输出成绩不及格
let score = 59;
if (条件表达式) {
//满足条件执行;
}
else {
//不满足条件执行;
}
② 示例：
<script>
let score = 59;
if (score >= 60) {
alert(`成绩及格`);
}
else {
alert(`成绩不及格`);
}
</script>
③ 运行效果
3) 多分支案例
① 语法格式：
//如果分数>=90 <=100,输出A
//否则 如果分数>=80 <90,输出B
//否则 如果分数>=70 <80,输出C
//否则 如果分数>=60 <70,输出D
//否则输出不及格)
let score = 80;
if (条件表达式) {
//执行操作;
}
else if (条件表达式) {
//执行操作;
}
else if (条件表达式) {
//执行操作;
}
else if (条件表达式) {
//执行操作;
}
else {
//所有条件不满足时，执行操作;
}
② 示例：
<script>
let score = 80;
if (score >= 90 && score <= 100) {
alert(`成绩等级为：A`);
}
else if (score >= 80 && score < 90) {
alert(`成绩等级为：B`);
}
else if (score >= 70 && score < 80) {
alert(`成绩等级为：C`);
}
else if (score >= 60 && score < 70) {
alert(`成绩等级为：D`);
}
else {
alert(`成绩不及格`);
}
</script>
③ 运行效果
（2）switch 判断
Switch描述：
- switch判断，有一个case满足条件后，后面的将不在判断，直接输出结果，直到遇到break；
- default可以放在switch中的任何地方，但是一般放在末尾；
应用场景：
- switch主要用于等值判断，case判断相等时，是全等比较；
1) 案例
① 语法格式：
//判断星期一到星期天，1~7代表星期一到星期天
let days = parseInt(prompt(`提示内容`));
switch (条件表达式) {
case 匹配条件:
//执行操作;
//break;
case 匹配条件:
//执行操作;
//break;
case 匹配条件:
//执行操作;
//break;
case 匹配条件:
//执行操作;
//break;
case 匹配条件:
//执行操作;
//break;
case 匹配条件:
//执行操作;
//break;
case 匹配条件:
//执行操作;
//break;
default:
//所有条件不满足时，执行操作;
}
② 示例：
<script>
let days = parseInt(prompt(`请输入1~7的数字`));
switch (days) {
case 1:
alert(`今天是星期一`);
break;
case 2:
alert(`今天是星期二`);
break;
case 3:
alert(`今天是星期三`);
break;
case 4:
alert(`今天是星期四`);
break;
case 5:
alert(`今天是星期五`);
break;
case 6:
alert(`今天是星期六`);
break;
case 7:
alert(`今天是星期天`);
break;
default:
alert(`输入有误`);
}
</script>
③ 运行效果
1）输入
2）输出
3、循环结构
（1）while 循环
① 语法格式：
//特点：先判断，在执行，满足条件执行，不满足条件不执行
//输出1~10的数字
let a = 1;
while(循环条件) {
//循环操作
}
② 示例：
<script>
let a = 1;
while(a <= 10){
document.write(a + " ");
// +在这里用作连接，" "是有一个空格的字符串，每次输出结果后，添加一个空格
a++;
}
</script>
③ 运行效果
（2）do-while 循环
① 语法格式：
//特点：先执行，后判断，条件不满足，也至少执行一次
//输出1~10的数字
let a = 1;
do {
//循环操作
}
while(循环条件);
② 示例
<script>
let a = 1;
do {
document.write(a + " ");
// +在这里用作连接，" "是有一个空格的字符串，每次输出结果后，添加一个空格
a++;
}
while(a <= 10);
</script>
③ 运行效果
（3）for 循环
注意事项（执行顺序）
① 执行初始条件
② 执行判断条件
③ 条件为真时，执行循环操作
④ 初始条件改变
⑤ 重复第②、③、④步操作，直至条件为假，结束循环
① 语法格式：
//特点：先判断，后执行，满足条件执行，不满足条件不执行
//输出1~10的数字
for(循环条件) {
//循环操作
}
② 示例：
<script>
for (let i = 1;i <= 10;i++) {
document.write(i + " ");
// +在这里用作连接，" "是有一个空格的字符串，每次输出结果后，添加一个空格
}
</script>
③ 运行效果
4 拓展 — forEach() & filter()
（1）forEach()循环
① 语法格式：
//遍历数组
//声明数组
let 数组名 = [数组内容];
//for循环写法
for (i = 0; i < 数组名.length; i++){
//输出结果
}
//forEach写法
数组名.forEach((参数) => {
//输出结果
})
② 示例：
<script>
let arr = ['a','b','c'];
console.log(`for循环执行结果`);
for (i = 0; i < arr.length; i++){
console.log(arr[i]);
}
console.log(`forEach循环执行结果`);
arr.forEach((item) => {
console.log(item);
})
//一个参数可简写：arr.forEach(item => console.log(item));
</script>
③ 运行效果
（2）filter()过滤
① 语法格式：
//声明数组
let 数组1 = [数组内容];
let 数组2 = [];
let 数组3 = [];
//for循环
for (i = 0; i < 数组1.length; i++){
if (数组1[i] >= 10){
数组2.push(数组1[i]);
}
}
console.log(`for循环执行结果：${
数组2}`);
//filter过滤
数组3 = 数组1.filter((item) => {
return item >=10
});
console.log(`filter过滤执行结果：${
数组3}`)
② 示例：
<script>
let arrOne = [2,5,11,16,28,34,78];
let arrTwo = [];
let arrThr = [];
//for循环
for (i = 0; i < arrOne.length; i++){
if (arrOne[i] >= 10){
arrTwo.push(arrOne[i]);
}
}
console.log(`for循环执行结果：${
arrTwo}`);
//filter过滤
arrThr = arrOne.filter((item) => {
return item >=10;
});
//一个参数可简写：arrThr = arrOne.filter(item => item >= 10);
console.log(`filter过滤执行结果：${
arrThr}`)
</script>
③ 运行效果
更多学习，请参考官方文档
① do-while： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/do…while
② Switch： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switch
③ While：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/while
④ If： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for