【六】JavaScript之流程控制
【1】语句块
{
// 语句块，会作为一个整体来执行。
}
- 判断语句/分支语句
- id
- switch
循环语句/遍历语句
【2】判断语句/分支语句
【2.1】if语句
// if中的条件的运算结果只会是布尔值
if(条件){
// 条件结果为true执行这里的代码
}
if(条件){
// 条件结果为true执行这里的代码
}else{
// 条件结果为false执行这里的代码
}
if(条件1){
// 条件1结果为true执行这里的代码
}else if(条件2){
// 条件2结果为true执行这里的代码
....
}else if(条件n){
// .....
}else{
// 上面所有条件结果都不为true执行这里的代码
}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="age"><button id="btn">判断年龄</button>
<script>
document.querySelector("#btn").onclick = function(){
let age = parseInt(document.querySelector('[name="age"]').value)
/**
* 单个条件分支
*/
// if(age<18){
// console.log("未成年");
// }
// /**
// * 单个条件2个分支
// */
// if(age<18){
// console.log("未成年");
// }else{
// console.log("成年")
// }
/**
* 多条件分支
*/
if(age<18){
console.log("未成年");
}else if(age<30){
console.log("青少年");
}else if(age<60){
console.log("中青年");
}else{
console.log("老年");
}
}
</script>
</body>
</html>
【2.2】switch语句
switch(条件){
with 选项1:
....
break;
with 选项2:
....
break;
....
with 选项n:
.....
default:
....
}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// // 获取操作系统的当前时间对象
// var date = new Date();
// console.log(date, typeof date);
// // 获取一个指定时间的对象
// date = new Date("1989-02-17 12:30:00");
// console.log(date);
// // 获取时间
// console.log(date.toISOString());
// // 获取年份
// console.log(date.getFullYear());
// // 获取月份
// console.log(date.getMonth()+1);
// // 获取本月的日期
// console.log(date.getDate());
// // 获取当前小时
// console.log(date.getHours());
// // 获取当前分钟
// console.log(date.getMinutes());
// // 获取当前秒
// console.log(date.getSeconds());
// // 获取数值时间戳[从1970年1月1日 00:00:00至今的总毫秒数]
// console.log(date.getTime());
// console.log(date.getTime()/1000); // 秒时间戳
// 根据今天周几判断显示网页的主题颜色
var date = new Date();
var week = date.getSeconds() % 7
// var week = date.getDate()
console.log( week ); // 获取今天是周几（周日是0，周一时1，周六是6）
switch (week) {
case 0:
console.log("周日哦");
break; // 跳出当前swtich语句
case 1:
console.log("周一");
break;
case 2:
console.log("周二");
break;
case 3:
console.log("周三");
break;
case 4:
console.log("周四");
break;
case 5:
console.log("周五");
break;
default:
console.log("周六！！！")
}
colorTheme = ["red", "orange", "yellow", "green", "#00ffff", "blue", "#ff00ff"]
document.body.style.backgroundColor = colorTheme[week];
// background-color 改成 backgroundColor，因为js中-号有特殊用途
</script>
</body>
</html>
switch 语句在python3.10版本中新增了进来，以前的版本是没有的。
flag = False match (100, 200): case (100, 300): # Mismatch: 200 != 300 print('Case 1') case (100, 200) if flag: # Successful match, but guard fails print('Case 2') case (100, y): # Matches and binds y to 200 print(f'Case 3, y: {y}') case _: # Pattern not attempted print('Case 4, I match anything!') # Case 3, y: 200
【3】循环语句/遍历语句
【3.1】while循环
while(条件){
// 条件每次为true，则执行花括号代码.
}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
/**
* while基本使用
*/
// 输出1-10之间的整数
// var num = 1;
// while (num<=10){
// // console.log(num);
// // // num+=1;
// // num++;
// console.log(num++);
// }
// // 输出1-10之间的偶数
// var num = 1;
// while (num<=10){
// if(num%2===0){
// console.log(num);
// }
// num++;
// }
// // 输出10-0之间的偶数
// var num = 10;
// while (num>=0){
// if(num%2===0){
// console.log(num);
// }
// num--;
// }
// // 循环统计
// // 输入1-100之间的整数和
// var sum = 0;
// var num = 1;
// while (num<=100){
// sum+=num++;
// }
// console.log(sum); // 5050
// 循环输出数组的成员
// var data = ["A", "B", "C", "D"]
// var key = 0;
// while (key < data.length){
// console.log(data[key++])
// }
// 循环js中获取的元素列表
// document.querySelector(css选择符); // 获取一个HTML元素对象
// document.querySelectorAll() // 获取多个HTML元素对象
var li_list = document.querySelectorAll("ul li");
var key = 0;
// js中推荐变量的命名风格时小驼峰写法
var colorList = ["red", "orange", "yellow", "green", "#00ffff", "blue", "#ff00ff"]
while (key < li_list.length){ // 小括号不管写的是什么，最终都会转成布尔值来进行判断。
// 获取表单元素以外的双标签元素的内容(innerHTML)
console.log(li_list[key].innerHTML);
// 修改双标签元素的内容
li_list[key].innerHTML = `第${key}个元素`
// 修改元素的css行内样式
li_list[key].style.backgroundColor = colorList[key];
// 避免死循环，让key自增，慢慢让while条件变得不成立
key++;
}
</script>
</body>
</html>
【3.2】do...while循环
do{
// 不管任何情况先执行一遍花括号代码，
// 然后当条件每次为true，则继续执行花括号代码
}while(条件);
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// do...while 也是循环语句，与while不一样的时，while先判断条件，后执行代码块，而do...while先执行代码块，后判断条件
// do...while 可以保证循环中的代码块会至少执行一遍，实际工作中很少使用。
// num = 10;
// while (num<10){ // 先判断条件，后执行花括号中的代码块
// console.log(num);
// }
num = 10;
do{ // 先执行代码块，
console.log(num++);
}while (num<10); // 后判断条件
</script>
</body>
</html>
【3.3】while与do...while的区别
while循环是先判断循环条件，后执行代码块。do...while循环是执行代码块，后判断循环条件，所以do...while至少会执行一遍代码，所以容易出现死循环的情况，因此开发中很少使用。
【3.4】for循环
// for循环，代替while语句
for(初始化循环; 循环条件; 步进器){
// 结果为true，执行这里的代码
}
// for遍历，遍历数组成员的下标，或对象的属性
for(var 下标 in 数据){
// 遍历数据过程中，执行这里的代码
}
// for遍历，遍历数组成员的值，或对象的属性值
for(var 成员值 of 数据){
// 遍历数据过程中，执行这里的代码。
}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 输出1-10之间的整数
// var num = 1; // 1. 初始化值
// while(num<=10){ // 2. 判断条件
// console.log(num); // 3. 条件为true时，执行代码块内容
// num++; // 4. 步进器，循环每一步的递增值，目的是让循环条件慢慢变得不成立
// }
/**
for(1. 初始值; 2. 判断条件; 4. 步进器){
// 3. 代码块
}
*/
// for(let num = 1; num<=10; num++){
// console.log(num);
// }
// for循环还可以在初始化值，判断条件或步进器都可以设置多段语句，采用英文逗号隔开
// for(let x = 1, y=10; x*3<=y; x++,y+=2){
// console.log(`x=${x}, y=${y}`);
// }
// for还可以嵌套使用，当然while循环也可以
// // 九九乘法表
// var content;
// for(let x=1; x<=9; x++){
// content = "";
// for(let y=1;y<=x;y++){
// content += `${x}*${y}=${x*y} `
// }
// console.log(content);
// }
/**
* for 遍历数组，获取下标
*/
// var colorList = ["red", "orange", "yellow", "green", "#00ffff", "blue", "#ff00ff"];
// for(let item in colorList){
// // item代表的是遍历过程中数组成员的下标
// console.log(item, colorList[item])
// }
/**
* for遍历数组，获取值
*/
colorList = ["red", "orange", "yellow", "green", "#00ffff", "blue", "#ff00ff"];
for(let item of colorList){
// item代表的是遍历过程中数组成员的值
console.log(item)
}
</script>
</body>
</html>
- 如果单纯要遍历数组中的数值下标成员，可以采用forEach来完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
var li_list = document.querySelectorAll("ul li");
var colorList = ["red", "orange", "yellow", "green", "#00ffff", "blue", "#ff00ff"]
// 由数组提供的一个专门遍历数组成员或数组下标的方法
li_list.forEach(function(item, key){
console.log(key, item);
item.style.backgroundColor = colorList[key];
})
</script>
</body>
</html>
【3.5】练习：使用while或者for循环实现以下图案效果。
// 1.
*
**
***
****
// 2.
****
***
**
*
// 3.
*
***
*****
*******
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// /**
// *
// **
// ***
// ****
// */
// for (let row=1, content; row<=4; row++){
// content = "";
// for (let star=1;star<=row;star++){
// content+="*";
// }
// console.log(content);
// }
// /**
//
// ****
// ***
// **
// *
//
// */
// for (var row=4,content; row>=1; row--){
// content = "";
// for (let star=1;star<=row;star++){
// content+="*";
// }
// console.log(content);
// }
/**
*
***
*****
*******
*/
// for(var row=1,content; row<=4; row++){
// content = "";
// for(var star=1;star<=row*2-1;star++){
// content+="*";
// }
// console.log(content);
// }
// document.write("*")
// document.write("*")
// document.write("*")
</script>
</body>
</html>
【4】中断语句
continue 在循环中停止继续执行本轮代码，跳到下一轮循环中。
break 在循环中停止当前循环的代码，跳出循环。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 输出1,2,4,5,7,9,10,11,12,13
for(let i=1;i<=13;i++){
// if(i===3 ||i === 6 || i===8) continue; // 跳过本轮的循环，进入下一轮循环
if(i===3 ||i === 6 || i===8) break; // 跳出当前语句
console.log(i);
}
</script>
</body>
</html>