JavaScript旅途之循环-详细用法（笔记）

循环

导读：本章主要介绍了循环的概念，以及循环的使用方法，包括while循环和for循环，以及循环的嵌套使用。

1. 循环的概念

循环是程序中最常用的结构之一，它可以让一段代码重复执行多次，从而提高程序的运行效率。循环的概念就是让一段代码重复执行多次，直到满足某个条件才停止。

2.循环的目的

循环的目的就是让一段代码重复执行多次，直到满足某个条件才停止。

3.循环语句

在程序中，一组语句被重复执行叫做 循环体,能否继续循环，要看循环条件是否满足，循环条件满足，继续循环，循环条件不满足，循环结束。

//例
for(var i = 1,i < 100,i++){
    console.log("老婆我错了");
}

4.for循环

1.for循环 重复执行某些代码，通常跟计数有关

2.for循环的语法结构如下：

for(初始化变量;循环条件;操作表达式){
    循环体
}

3.初始化变量 就是var声明的一个普通变量， 一般用来计数，循环开始前执行一次

4.条件 表达式，用于决定是否继续循环，简单来说就是终止条件

5.操作表达式 是每次循环后执行的代码，一般用来改变计数器的值（递增或递减）

//练习：打印1-100之间所有的整数
for (var i=0; i<=100;i++){
console.log(i);
}
//执行过程
//1.先初始化变量 i=0 然后开始判断i是否小于等于100，如果小于等于100，就先执行循环体,再去i++，如果不小于等于100，就直接跳出循环

注意：for循环的三个表达式都可以省略，但是分号不能省略，分号是必须的

---

断点调试：在代码中设置断点，然后运行代码，代码运行到断点处会暂停，然后可以逐行执行代码，查看代码的执行过程，查看变量的值，查看函数的调用栈等等。
F12=》sources=》点击行号设置断点就可以啦。

---

---

---

//重复执行相同的代码
//由用户来控制输出
var a = prompt("请输入数值");
for (var c = 0; c <= a ;c++){
console.log(c);
}

for循环执行不同的代码 因为我们有计数器》变量《的存在 变量每次循环都会发生变化

//练习：输出一个人1-100岁
for(var i = 1 ; i <= 100 ; i++){
  if(i == 1){
  console.log("这个人一岁了。适合修仙，天赋异禀");
  }else if(i == 100){
  console.log("这个人修仙的年寿达到了一定程度，开始上天！");
  }else{
  console.log("目前修仙年龄"+i+"岁");
  }
}

for循环重复某些相同的操作：for循环因为有了计数器的存在，所以可以重复执行某些相同的操作，比如：算术运算

//练习：计算1-100之间所有整数的和
var a = 0;//定义一个变量用来存储和
for(var i = 1 ; i <= 100 ; i++){//循环1-100之间所有整数
   a = i + a;//每次循环都会执行一次加法运算
   console.log(a);//输出每次循环的结果
}

//求1-100的平均数
var a = 0;
var b;
for(var i = 1 ; i <= 100 ; i++){
   a = a + i;
}
b = a / 100;
console.log(b);

//求1-100之间所有奇数或偶数的和
var b = 0;
var a = 0;
for(var i = 1 ; i <= 100 ; i++){
   if((i%2)==0){
    a += i;
   }else{
   b += i;
   }
}
console.log('偶数是'+a);
console.log('奇数是'+b);
//求1-100之间所有能被3整除的数的和
var a = 0;
for(var i = 1 ; i <= 100 ; i++){
   if((i%3)==0){
   a += i;
   }
}
console.log(a);

//案例
//要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班的总成绩和平均成绩
var a = 0;
var b = 0;
var student = parseInt(prompt('请输入学生人数'));
for(i = 1 ; i <= student ; i++){
   var grades = parseInt(prompt('请输入成绩'));
   a = grades + a;
   b = a / student;
} 
console.log('总分'+a);
console.log('平均'+b);

//一行打印五个emoji
var str = '';
for(i = 1 ; i <= 5 ; i++){
   str = str + '😊';
}
console.log(str);

双重for循环
循环嵌套 简答来说就是循环中还有循环.

• 双重循环for语法

for(初始化变量;循环条件;操作表达式){
    for(初始化变量;循环条件;操作表达式){
        循环体
    }
}

• 我们可以把内循环看作为外循环语句
• 外循环执行一次,内循环全部执行

//打印五行五列标表情
var str = '';
for(var i = 1 ; i <= 5 ; i++){
   for(var j = 1 ; j <= 5 ; j++){
   str = str + '🤣';
   }
   str = str + '\n';
}console.log(str);

//打印n行n列
var str = '';
var n = parseInt(prompt('请输入行数'));
var m = parseInt(prompt('请输入列数'));
for(var i = 1 ; i <= n ; i++){
   for(var j = 1 ; j <= m ; j++){
   str = str + '🤣';
   }
   str = str + '\n';
}console.log(str);

//打印三角锥
var str = '';
for(var i = 1 ; i <= 10 ; i++){
   for(var j = i ; j <= 10 ; j++){
   str = str + '🤣';
   }
   str = str + '\n';
}console.log(str);

//打印九九乘法表
var a = 0;//定义一个变量用来存储和
var str = '';  //定义一个变量用来存储字符串
for(i = 1 ; i <= 9 ; i++){//外循环控制行数
   for(j = 1 ; j <= i ; j++){//j=1代表第一列
   //倒三角 for(j = i ; j <= 1 ; j++)
   a = i * j;//其次是j的运算 j=i=1,所以是1*1=1
   str = str + j+'*'+i+'='+a+'  ';//拼接字符串
   }
   str = str + '\n';
}console.log(str);
/*逻辑:
j=1 是内循环的初始值，代表第一列。
1.内循环会让 j 从 1 递增到 i（包括 i）。
2.每次循环时，j 会递增 1。
3.当 j 的值大于 i 时，内循环结束，控制权返回到外循环。
4.外循环会让 i 从 1 递增到 9（包括 9）。每次循环时，i 会递增 1。*/

5.while循环

while循环语法

while(循环条件){
    循环体
}

执行思路

1. 先判断循环条件是否成立
2. 如果成立,则执行循环体
3. 执行完循环体,再次判断循环条件是否成立
4. 如果成立,则执行循环体
5. 以此类推,直到循环条件不成立,循环结束

//案例
var i = 1;
while(i<=100){//循环条件
   i++;//循环体
   console.log("nihao1");
}

//练习
var i = 1;
while(i<=100){
   
   console.log("我现在"+i+'岁了');
   i++;
}
//1-100的总数
var a = 1f;
var i = 1;
while(i<100){
   i++;
   a =a+i ;
   console.log(a);
}

6.do-while循环

do while是while的一种变形,它的执行逻辑和while循环基本一致,只是在判断循环条件是否成立的时机上有所不同.

do-while循环语法

do{
    循环体
}while(循环条件)

执行思路

1. 先执行循环体
2. 执行完循环体,再判断循环条件是否成立
3. 如果成立,则继续执行循环体
4. 以此类推,直到循环条件不成立,循环结束

//案例
var i = 1;
do{
    i++;
 console.log("你好啊");
}while(i <= 10);

注意事项: do-while循环至少会执行一次循环体,而while循环有可能一次都不执行

//练习
var i  = 1;
do{
console.log('我'+i+"岁了");
i++;
}while(i<=100);
//1-100的总数
var i  = 1;
var a  = 0;
do{
a += i;
i++;
}while(i<=100);
console.log(a);

//问到你说爱我
do{
var i = prompt("你敢不爱我？");
}while(i !== "我爱你");

7.循环小结

1. Js的循环有三种,分别是for循环,while循环和do-while循环.

2. while和do while可以做更复杂的循环,但是for循环更简洁,所以在实际开发中,for循环的使用频率更高.

3. while和do while的区别在于,while循环是先判断循环条件,再执行循环体,而do while循环是先执行循环体,再判断循环条件.

4. do-while循环至少会执行一次循环体,而while循环有可能一次都不执行

8.continue和break

1. continue

continue语句用于跳过循环体中的某次循环,直接进入下一次循环的执行(本次循环体continue之后的代码少执行一次)

//案例
for(var i = 1 ; i <= 5 ; i++){
    if(i == 3){
        continue;
    }console.log('ok'+i);
}
//1-100相加 但是不加3的倍数
var o = 0;
for(var i = 1 ; i <= 100 ; i++){
   if((i%3)==0){
   continue;
   }
   o = o + i;
}console.log(o);

2. break

break语句用于立即终止循环,即循环条件没有满足的情况下,也会强制结束循环

//案例
for(var i = 1 ; i <= 5 ; i++){
    if(i == 3){
        break;
    }console.log('ok'+i);
}

break和continue的区别

1. continue是跳过本次循环,进入下一次循环,本次循环体continue之后的代码少执行一次
2. break是立即终止循环,循环条件没有满足的情况下,也会强制结束循环

//作业
var a = 100;

do {
    var b = prompt("请输入你要的操做\n1.存钱\n2.取钱\n3.显示余额\n其余操作退出");
    if (b == 1) {
        var c = parseInt(prompt("请输入金额"));
        a += c;
        alert(a);
    } else if (b == 2) {
        var j = a;
        var c = parseInt(prompt("请输入金额"));
        if ((a - c) < 0) {
            alert("抱歉,老板你的钱不够了!");
            a = j;
        } else {
            a -= c;
            alert("剩余" + a);
        }
    } else if (b == 3) {
        alert("剩余" + a);
    } else {
        alert("正在退出");
        break;
    }
} while (1);