第一章：循环
1.1 循环的目的
- 在实际问题中，有许多具有
规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。 - 示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循环的目的</title><script>/*循环的目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。*/for (var i = 0; i < 100; i++) {console.log("我错啦");}</script></head><body></body></html>
1.2 JS中的循环
- 在JS中，主要有三种类型的循环：
- ①for循环。
- ②while循环。
- ③do-while循环。
第二章：for循环
2.1 概述
- 在程序中，一组被重复执行的语句被称之为
循环体，能够继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。
2.2 语法结构
- for循环主要用于将某些代码循环若干次，通常和计数有关系。其语法结构如下：
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
初始化变量：通常被用于初始化一个计数器，该表达式可以使用var关键字声明新的变量，这个变量帮助我们记录次数。条件表达式：用于确定每一次循环能否被执行。如果结果是true，就继续循环，否则退出循环。操作表达式：每次循环的最后都要执行的表达式。通常用于更新或者递增计数器的变量。当然，递减变量也是可以的。- 执行过程：
- ①初始化变量，初识化操作在整个for循环只会执行一次。
- ②执行条件表达式，如果为true，就执行循环体中的语句，否则退出循环，循环结束。
- ③执行操作表达式，此时第一轮结束。
- ④第二轮开始，直接去执行条件表达式（不再初始化变量），如果为true，则去执行循环体语句，否则退出循环。
- ⑤继续执行操作表达式，第二轮结束。
- ⑥后续和第二轮一致，直至条件表达式为假，结束整个for循环。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for循环</title>
<script>
for (var i = 1; i <= 100; i++) {
console.log("你好" + i);
}
</script>
</head>
<body>
</body>
</html>
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for循环重复某些相同操作</title>
<script>
/* for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。*/
/* 求1-100之间所有整数的累加和 */
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log("1+2+3...+100=" + sum);
</script>
</head>
<body>
</body>
</html>
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>求学生成绩</title>
<script>
/* 要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。 */
var num = prompt("请输入班级人数");
var sum = 0;
for (var i = 1; i <= num; i++) {
var score = prompt("请输入第" + i + "个学生的成绩");
sum += parseFloat(score);
}
console.log("该班级总的成绩是：" + sum);
console.log("该班级总的平均成绩是：" + (sum / num));
</script>
</head>
<body>
</body>
</html>
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一行打印5颗星星</title>
<script>
/* ☆☆☆☆☆ */
var result = '';
for (let i = 0; i < 5; i++) {
result += '☆';
}
console.log(result);
</script>
</head>
<body>
</body>
</html>
第三章：双重for循环
3.1 概述
- 很多情况下，单层for循环并不能满足我们的需求，比如我们需要打印5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for循环语句，我们称之为双重for循环。
3.2 语法
- 语法：
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
///需执行的代码;
}
}
- 内层循环可以看做外层循环的语句。
- 内层循环执行的顺序也要遵循for循环的执行顺序。
- 外层循环执行一次，内存循环执行全部次数。
3.3 应用示例
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印五行五列星星</title>
<script>
/*
☆☆☆☆☆
☆☆☆☆☆
☆☆☆☆☆
☆☆☆☆☆
☆☆☆☆☆
*/
var star = '';
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
star += '☆';
}
star += '\n';
}
console.log(star);
</script>
</head>
<body>
</body>
</html>
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印倒三角形星星</title>
<script>
/*
☆☆☆☆☆
☆☆☆☆
☆☆☆
☆☆
☆
*/
var star = '';
for (var i = 5; i >= 1; i--) {
for (var j = 1; j <= i; j++) {
star += '☆';
}
star += '\n';
}
console.log(star);
</script>
</head>
<body>
</body>
</html>
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九九乘法表</title>
<script>
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + "*" + i + "=" + (i * j)+'\t';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
第四章：while循环
4.1 概述
- while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
4.2 语法结构
while (条件表达式) {
// 循环体代码
}
- 执行过程：
- ①先执行条件表达式，如果结果为true，则执行循环体代码；如果结果为false，则退出循环，执行后面的代码。
- ②执行循环体代码。
- ③循环体代码执行完毕后，程序会继续判断执行条件表达式，如果条件依然为true，则会继续执行循环体，直到循环体条件为false时，整个循环过程才会结束。
- 注意：
- ①使用while循环的时候一定要注意，它必须有退出的条件，否则就会成为死循环。
- ②while循环和for循环的不同之处在于while循环可以做较为复杂的条件判断，比如判断用户名和密码等。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环</title>
<script>
var i = 1;
while (i <= 100) {
console.log(i);
i++;
}
</script>
</head>
<body>
</body>
</html>
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环案例</title>
<script>
/* 打印人的一生，从1到100岁 */
var i = 1;
while (i <= 100) {
console.log('这个人今年' + i + '岁啦');
i++;
}
/* 计算1到100之间的整数和 */
var j = 1;
var sum = 0;
while (j <= 100) {
sum += j;
j++;
}
console.log('1~100之间的整数和是：' + sum);
/* 弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问 */
while (true) {
var msg = prompt('你爱我吗');
if (msg == '我爱你') {
break;
}
}
</script>
</head>
<body>
</body>
</html>
第五章：do-while循环
5.1 概述
- do-while循环其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
5.2 语法结构
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
- 执行流程：
- ①先执行一次循环体代码。
- ②再执行条件表达式，如果结果为true，则继续执行循环体代码，如果结果为false，则退出循环，继续执行后面的代码。
注意：先执行循环体，再判断，我们会发现do-while循环体语句至少会执行一次。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while</title>
<script>
/* 打印人的一生，从1到100岁 */
var i = 1;
do {
console.log('这个人今年' + i + '岁啦');
i++;
} while (i <= 100);
/* 弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问 */
do {
var msg = prompt('你爱我吗');
} while (msg != '我爱你');
alert('我也爱你');
</script>
</head>
<body>
</body>
</html>
第六章：循环总结
- JS中循环有for、while、do-while。
- 三个循环很多情况下都可以相互替代使用。
- 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for。
- while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些。
- while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行。
- while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体， 而 while 可能一次也不执行。
- 实际工作中，我们更常用
for循环语句，它写法更简洁直观。
第七章：continue和break
7.1 continue关键字
continue关键字用于立即跳出本次循环，继续下一次循环。- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>continue关键字</title>
<script>
/* 吃5个包子，第3个有虫子，继续吃第4个和第5个包子 */
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('包子有虫子');
continue; // 跳出本次循环，跳出的是第3次循环
}
console.log('我正在吃第' + i + '个包子');
}
</script>
</head>
<body>
</body>
</html>
7.2 break关键字
break关键字用于立即跳出整个循环。- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break关键字</title>
<script>
/* 吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了 */
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('包子有虫子');
break; // 直接退出整个for 循环，跳到整个for下面的语句
}
console.log('我正在吃第' + i + '个包子');
}
</script>
</head>
<body>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
