重点--for循环

一组被重复执行的语句叫循环体，能否继续重复执行，取决于终止条件
由循环体和终止条件组成的语句叫循环语句

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

2. for的语法结构

for(初始化变量;条件表达式;操作表达式){
循环体
}
3.初始化变量 就是用var声明的普通变量，通常用于作为计数器
4.条件表达式，就是用来决定每一次循环是否继续执行，就是终止条件
5.操作表达式 是每次循环最后执行的代码，经常用语我们计数器变量进行递增、递减更新

第一个条件就是起始点，第二个条件就是终止点
    <script>
        for(var i = 1; i<= 100; i++){
            console.log('你好吗');
        }
    </script>

for循环的执行顺序是：
1 i=1
2 i<=100

3. console.log('你好吗');
   4.i++
   5.i<=100中的i自增一位，而起始值 i=1，只执行第一次
   6.当 i++不在100范围内之后，就跳出for循环，继续执行后面的代码

所以是先执行起始条件，然后判断范围是否在条件内，如果在范围内就执行花括号里的代码，最后才自增，所以自增是整个循环的最后一步

for(①初始化表达式;②条件表达式;④更新表达式){
　　③语句...
}

　　
　　

    <script>
        var num = prompt('输入次数');
        for(var i = 1; 1 <= num; 1++){
            console.log('输出结果');
        }
    </script>

因为使用了计数器，计数器在每次循环的过程中都会变化

    <script>
        //for循环重复执行不同的代码，因为有计数器变量i的存在,i每次循环是变化的
        //想要输出一个人1-100岁
        for(var i = 1; i <= 15; i++){
            console.log('你今年' + i + '岁了。');
        }
    </script>

image.png

    <script>
        for(var i = 1; i <= 15; i++){
            if(i == 1){
                console.log('你今年1岁了');
            }else if(i == 15){
                console.log('你今年15岁了');
            }else{
                console.log('你今年' + i + '岁了');
            }
        }
    </script>

image.png

分析：
1.要循环100次，先要一个计数器i
2.还需要一个存储结果的变量sum，但是初始值要为0
3.核心算法：1 + 2 + 3 + 4···，sum = sum + i;

    <script>
        //1-100累加案例
        var j = 0;
        for(i = 1; i <= 100; i++){
            j = j + i;
        }
        console.log(j);
    </script>

         j = j + i; 等价于 j += i;

如果console.log(j);写在for循环中，就会把所有j的值全部打出来，会打100次，写在外面就只打最后一次

image.png

1.求1-100之间所有数的平均值
2.求1-100之间所有偶数和奇数的和
3.求1-100之间所有能被3整除的数字的和

    <script>
        //求1-100之间所有数的平均值
        var num = 0;
        for(i = 1; i <= 100; i++){
            num += i;
        }
        console.log(num / 100);

        //求1-100之间所有偶数和奇数的和
        var even = 0;
        var odd = 0;
        for(i = 1; i <=100; i ++){
           if(i % 2 == 0){
               even = even + i;
           }else{
               odd = odd + i;
           }
        }
        console.log('1~100之间的所有偶数和是' + even);
        console.log('1~100之间的所有奇数和是' + odd);
        

        //求1-100之间所有能被3整除的数字之和
        var a = 0;
        for(i = 1; i <100; i++){
           if(i % 3 == 0){
               a += i;
               }
        } 
        console.log('1~100之间所有能被3整除的数之和是：' + a);
    </script>

image.png

要求：用户输入班级人数，之后依次输入每个学生的成绩，最后打印出班级总的成绩和平均成绩

分析：
1.先接收到班级人数(第一个变量：num，条件表达式范围)
2.然后再接收每一个学生的成绩（第二个变量：score，此变量每一次的值不是递增的，是随机的）
3.再要一个变量班级总成绩：total = 0，这里要从0开始
3.每次循环接收一个score变量值，这个就是每一个学生成绩
4.将每一个score值循环相加成为总成绩
5.将总成绩除以学生人数num算出均值

    <script>
        //求学生成绩
        var num = parseInt(prompt('输入班级人数'));
        var score; //分数
        var total = 0; //班级总成绩
        for(i = 1; i <= num; i++){
            score = parseFloat(prompt('输入第 ' + i + ' 个学生成绩'));
            total += score;
        } 
        
        alert('班级总成绩是：' + total + '\n班级平均成绩是：' + total / num);
    </script>

image.png

1.弹出输入框输入总的班级人数(var num)
2.一次输入学生成绩(var score)，此时要用到for，弹出次数跟班级总人数有关，表达式 i <= num;
3.计算成绩，先求总成绩(num)，再求平均成绩(vaerage);
4.输出结果

    <script>
        var num = prompt('请输入班级的总人数：');//班级总人数
        var sum = 0;//求和的变量
        var average = 0;//求平均值的变量
        for(var i = 1; i <= num; i++){
            var score = prompt('请输入第' + i+ '个学生成绩');
            sum = sum + parseFloat(score);
        }
        average = sum / num;
        alert('班级总的成绩是：' + sum);
        alert('班级平均分是：' + average);
    </script>

案例分析：
这个题的重点在怎么输出5个五角星，用以前的思路只能输出数字，但是五角星输不出，如果用 + ，就会输出☆12345，如果用乘，就会显示NaN，所以要用追加五角星的方式做，否则输不出来

    <script>
        //打印5颗星星
        var star = '';
        for(var i = 1; i <= 5; i++){
            star = star + '☆';
        }
        alert(star);
    </script>

image.png

---

for(外层的初始化变量; 外层的条件表达式; 外层的操作表达式){
        for(里层的初始化变量; 里层的条件表达式; 里层的操作表达式){
                执行语句;
            }
    }

1.内层的整个for循环就是外层for循环的执行语句
2.嵌套for循环的执行顺序是：外层每循环一次，内层就全部执行

    <script>
        //嵌套循环演示
        for(i = 1; i<= 3; i++){
            console.log('这是外层循环的第 ' + i +  '次');
            for(j = 1; j<= 3; j++){
                console.log('这是内层循环的第 ' + j +  '次');
            }
        }
    </script>

image.png

重点在怎么控制每行5个
外层负责换行5次，内层负责打印每行的5颗星星
外层每循环一次，内层就循环了5次，所以外层每循环一次，给星星加一个换行
全部循环完成后，再输出

    <script>
        //打印5行5列星星
        var star = '';
        for(var i = 1; i <= 5; i++){
            for(var j = 1; j <= 5; j++){
                star += '☆';
            }
            star = star + '\n';
        }
        console.log(star);
    </script>

image.png

        var rows = parseInt(prompt('请输入行数：'));
        var cols = parseInt(prompt('请输入列数'));
        var star = '';
        for(var i = 1; i <= rows; i++){
            for(var j = 1; j <= cols; j++){
                star += '☆';
            }
            star = star + '\n';
        }
        console.log(star);

分析：

image.png

下面两种方法都可行:一个是改变初始值，让初始值每次少1。一个是改变范围，让范围每次少1

    <script>
        //打印倒三角形图案
        var star = '';
        for(var i = 1; i <= 10; i++){
            for(var j = 10; j >= i; j--){
                
                star += '☆';
            }
            
            star = star + '\n';
        }
        console.log(star);



        var star = '';
        for(var i = 1; i <= 10; i++){
            for(var j = i; j <= 10; j++){
                
                star += '☆';
            }
            
            star = star + '\n';
        }
        console.log(star);
        
    </script>

image.png

1.99乘法表就是每行的行数乘以每行的列数
2.外层for循环控制行 i，内层循环控制列 j
3.核心：j <= i; 控制其每行个数
4.每行打印完毕，另起一行

5. 核心2：控制打印内容 star += '☆' ==> 1 × 2 = 2 ==> 行 × 列 = i * j
   sum += j; 的j也就是上面的☆，也就是上面的1 × 2 = ; 2就是行 × 列 = i * j;

    <script>
        //99乘法表
        var sum = '';
        for(i = 1; i <= 9; i++){
            for(j = 1; j <= i; j++){
                //1 × 2 = 2
                //star += '☆';
                //sum += j;的j也就是上面的☆，也就是上面的1 × 2 = ;2就是行 × 列 = i * j;
                sum +=j  + '×' + i + '=' + i * j + ' ';
            }
            sum = sum + '\n';
        }
        console.log(sum);
    </script>

image.png