// 1 JS中 存在三种循环类型
for循环 while循环 do..while循环
1 for 循环
重复执行某些代码，通常和计数有关系
1.1 语法结构
// for (初始化变量;条件表达式;操作表达式) {
// 循环体
// }
// 初始化变量 就是用var 声明的一个普通变量
// 条件表达式： 决定每一次循环是否继续执行，终止条件
// 操作表达式： 每次循环最后执行的代码，用于变量更新(递增或递减)
1.2 断点调试
观察运行过程
// 浏览器中按F12--》sources-->找到需要调试的文件--》在程序的某一行设置断点
// Watch:监视，可以监视变量值的变化，很常用。
// F11：程序单步执行，让程序一行一行进行，观察watch值的变化。
// 代码调试很重要，可以解决bug
2 for 循环执行相同的代码
<script>
for (var i = 1; i <= 5; i++) {
console.log('消费不能少');
}
</script>2.1 可控制性
可以让用户来控制 输出的次数
<script>
var num = prompt('请输入您想要输出的次数:');
for (var i = 1; i <= num; i++) {
console.log('2022,一起努力！');
}
</script>3 for 循环可以执行不同的代码
// 由于计算器 i 的存在，每次执行 i 的循环值都在变化
<script>
for (var i = 1; i <= 5; i++) {
console.log('小飞今年' + i + '岁啦');
}
</script>4 拓展应用
<script>
for (var i = 1; i <= 80; i++) {
if (i == 1) {
console.log('今年一岁了，出生了！');
} else if (i == 80) {
console.log('今年八十岁了，他死了！');
} else {
console.log('今年' + i + '岁了！');
}
}
</script>5 for 循环可以重复某些相同的操作
// 要求： 求 1-100之间所有的整数的累加和
<script>
var sum = 0; // 需要一个储存结果的变量sum
for (var i = 1; i <= 100; i++) { // 需要循环执行100次
sum = sum + i; // 核心算法： sum = sum + i
}
console.log(sum); // 输出结果
</script>for 循环的案例题目
// 1 求 1-100之间所有数的平均值
<script>
var average = 0;
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum = sum + i;
average = sum / 100;
}
console.log(average);
</script>// 2 求1-100之间的所有偶数和奇数的和
<script>
var doubles = 0;
var singles = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
doubles = doubles + i;
} else {
singles = singles + i;
}
}
console.log('1-100之间所有偶数的和是' + doubles + '');
console.log('1-100之间所有奇数的和是' + singles + '');
</script>// 3 求1-100之间的所有的能被3整除的数的和
<script>
var sum = 0;
for (i = 1; i <= 100; i++) {
if (i % 3 == 0) {
sum = sum + i;
}
}
console.log('1-100之间能够被3整数的数的和是:' + sum + '');
</script>// 4 求学生成绩的案例
// 要求：用户输入班级人数后，会弹出对应人数的弹出框，最后打印出班级总成绩和平均成绩
<script>
var sum = 0; // 求和的变量
average = 0; // 求平均值的变量
var num = prompt('请输入你的班级人数:'); // 弹出框输入班级的总人数
for (i = 1; i <= num; i++) { // for 循环，弹出的次数和班级总人数保持一致
var score = prompt('请输入第' + i + '个学生的成绩');
sum = sum + parseFloat(score); // 求总成绩
// 由于从 prompt 取来的值是字符型的，需要转换为 数值型
}
average = sum / num; // 求平均成绩
alert('你的班级的平均成绩是' + average);
alert('你的班级的总成绩是' + sum);
</script>
</script>6 for 循环拓展应用
for 循环打印一行五颗星星
<script>
var str = '';
for (var i = 1; i <= 5; i++) {
str = str + '*'; // 每次循环一次就多一个星星
}
console.log(str);
</script>让用户来决定一行到底多少个星星
<script>
var num = prompt('请输入星星的个数:');
var str = '';
for (var i = 1; i <= num; i++) {
str = str + '*'; // 每次循环一次就多一个星星
}
console.log(str);
</script>7 双重for循环（循环嵌套）
// 在一个循环语句中再定义一个循环语句的语法结构，被称之为双重for循环
7.1 语法结构
// for (外层的初始化变量；外层的条件表达式；外层的操作表达式) {
// for(里层的初始化变量；里层的条件表达式；里层的操作表达式) {
// 执行的语句；
// }
// }
7.2 注意事项：
// 可以把里面的循环看成是外层循环的执行语句
// 外层循环执行一次，里层循环执行全部
7.3 代码验证
<script>
for (var i = 1; i <= 3; i++) {
console.log('这是外层循环的第' + i + '次');
for (var j = 1; j <= 3; j++) {
console.log('这是里层循环的第' + j + '次');
}
}
</script>7.4 打印五行五列
// 核心： 外层循环负责打印五行，里层负责一行五个
<script>
var str = '';
for (i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
str = str + '*';
}
// 如果一行打印完，就要另外起一行
str = str + '\n';
}
console.log(str);
</script>7.5 拓展打印n行n列
<script>
var num1 = prompt('请输入您打印几行星星');
var num2 = prompt('请输入您打印几列星星');
var str = ''
for (i = 1; i <= num1; i++) {
for (j = 1; j <= num2; j++) {
str = str + '*';
}
str = str + '\n';
}
console.log(str);
</script>8 打印三角形
8.1 打印倒三角形案例
<script>
for (var i = 1; i <= 10; i++) { // 外层循环控制行数
for (var j = 1; j <= 10 - i; j++) { // 里层循环打印每一行的个数不一样 j=i
for (var j = i; j <= 10; j++) // 第二种算法表达式
str = str + '*';
}
str = str + '\n';
}
console.log(str);
</script>8.2 打印正三角形案例
<script>
var str = '';
for (var i = 1; i <= 10; i++) { // 外层循环控制行数
for (var j = 1; j <= i; j++) { // 里层循环打印每一行的个数不一样 j =10-i
// for (var j = 10 - i; j <= 10; j++) 第二种算法
str = str + '*';
}
str = str + '\n';
}
console.log(str);
</script><script>
var str = '';
for (i = 1; i <= 9; i++) { // 外层的循环控制行数i，循环九次，打印九行
for (j = 1; j <= i; j++) { // 里层的循环控制美航个数 j<=i
// 1 × 2 = 2
str += j + '×' + i + '=' + i * j + ' \t '; // 根据乘法表来写 算法
}
str = str + '\n'; // 打印每一行都需要换行
}
console.log(str);
</script>
