js循环学习小结

循环

1.目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这样的操作就需要重复执行

2.for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

<script>
        //循环的目的(重复执行某些代码)
        for (var i = 1; i <= 100; i++) {
            console.log('我错了');
        }
    </script>
    <script>
        //1.for重复执行某些代码，通常跟计数有关系
        //2.any语法结构
        for(初始化变量；条件表达式；操作表达式){
            //循环体
        }
        //3.初始化变量就是用var声明的普通变量，通常用于作为计数器使用
        //4.条件表达式就是终止的条件
        //5.操作表达式是每次循环最后执行的代码，经常用于作为计数器变量进行更新（递增或者递减）
        (i++)是最后执行的代码
    </script>

断点调试：

打开浏览器按F12.点击source,代码就出出现，并在相应的代码前面打断点，然后要刷新一下。在右侧的单步执行进入for循环中再进行执行

执行不相同的代码：

for循环还可以执行不同的代码，这主要是因为使用的计数器，计数器在每次循环过程中都会有变化：

<script>
        //for 循环可以重复执行不同的代码 因为我们有计数器变量i的存在 i每次循环值都有变化
        //我们想要输出1个人 1~100岁
        // for (var i = 1; i <= 100; i++) {
        //     console.log('这个人今年'+i+'岁了');
        // }
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('这个人今年1岁了，他出生了');
            } else if (i == 100) {
                console.log('这个人今年100岁了，他死了');
            } else {
                console.log('这个人今年' + i + '岁了');
            }
        }
    </script>

for循环重复着某些相同操作

for循环因为有了计数器的存在，我们还可以重复执行某些操作，比如做一些算数运算。

例如1~100的累加和

<script>
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);
    </script>

案例：

<script>
        //去1~100所有数的和的平均值
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum / 100);
    </script>
    <script>//求1~100所有数的奇数和和偶数和
        var sum1 = 0; //求奇数和
        var sum2 = 0; //求偶数和
        for (var i = 1; i <= 100; i++) {
            if (i % 2 != 0) {
                sum1 += i;
            } else {
                sum2 += 1;
            }
        }
        console.log('奇数和为：' + sum1);
        console.log('偶数和为：' + sum2);
    </script>
    <script>//1~100之间能被3整除的数的和
        var sum3 = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                sum3 += i;
            }
        }
        console.log('被3整除的数为：' + sum3);
    </script>

求学生成绩：

<script>
        var count = prompt('请输入班级的人数：'); //人数 
        var sum = 0; //求和
        var average = 0; //求平均值
        for (var i = 1; i <= count; i++) {
            //因为从prompt取过来的数据是字符串型的，字符串需要转换为数字型
            var score = prompt('请输入第' + i + '个学生的成绩')
            sum += parseFloat(score); //转换为数字型数据！！！
        }
        average = sum / count;
        alert('班级总成绩为：' + sum)
        alert('平均值为：' + average)
        </script>

案例：

一行打印五颗星星（记住，是一行哦！）

<script>
        //一行打印五个星星
        // for (var i = 1; i <= 5; i++) {
        //     console.log('*');//由于这样输出的星星不是一行的，所以排除这个方法
        // }
        var str = '';//这种方法称为追加字符串的方式
        for (var i = 1; i <= 5; i++) {
            str += '*';//每次就会多加一颗星星；
        }
        console.log(str);
    </script>

外层循环

 <script>
        //双重for循环 语法结构
        /*
        for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
            for(里层的初始化变量;里层的操作表达式;里层的操作表达式){
                //执行语句;
            }
        }
        */
        //2.我们可以把里面的循环看做是外层循环的语句
        //3.外层循环一次里层循环执行全部
        //4.代码验证
        for (var i = 1; i <= 3; i++) {
            console.log('这是外层for循环第' + i + '次');
            for (var j = 1; j <= 3; j++) {
                console.log('这是里层的循环' + j + '次');//当内层循环结束后进入外层循环
            }
        }
    </script>

打印五行五列星星的效果

  <script>
        //打印五行五列的星星
        var str = '';
        for (var i = 1; i <= 5; i++) { //外层for循环负责打印五行
            for (var j = 1; j <= 5; j++) { //内层for循环负责打印五列
                str += '*';
            }
            //如果一行打印完毕，五个星星就要另起一行
            str = str + '\n'; //用于换行
        }
        console.log(str);
    </script>

答应倒叁角型

<script>
        //打印倒星星
        var str = '';
        for (var i = 1; i <= 10; i++) { //打印10行如果变为(var =10;i>=1;i--)那么就会变成正三角形
            for (var j = i; j <= 10; j++) {
                str = str + '*'
            }
            str = str + '\n'
        }
        alert(str);
    </script>

打印九九乘法表

<script>
        //打印九九乘法表
        var str = '';
        for (var i = 1; i <= 9; i++) { //外层循环打印行数
            for (var j = 1; j <= i; j++) { //内层循环打印列数
                str = str + j + 'x' + i + '=' + i * j + ' '; //公式输出
            }
            str = str + '\n' //换行
        }
        alert(str); //用一个弹窗的格式输出
    </script>

for循环小结

• for循环可以重复执行某些相同的代码
• for循环可以重复执行些许不同的代码，因为我们有计数器
• for循环可以重复执行某些操作，比如算数运算符加法操作
• 随着需求增加，双重for循环可以做更多，更好看的效果
• 双重for循环，外层循环一次，内层for循环全部执行
• for循环时循环条件和数字直接相关的循环

3.while循环

<script>
        //1.while循环语法结构  while 当。。。。的时候
        while(条件表达式){
           //循环体
        }
        //2.执行思路 当条件表达式结果为true 则执行循环体 否则退出循环
    </script>

<script>
        var num = 0;
        while (num <= 10) {
            console.log('你好呀');
            num++;//一定要加入这句话，不然就是死循环
        }
    </script>

案例：

 <script>
        //弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束。否则，一直询问
        var message = prompt('你爱我吗？');
        while (message != '我爱你') {
            message = prompt('你爱我吗?');
        }
        alert('好了');
    </script>

4.do …while循环

do…while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真。就会重复的执行循环。否则退出退出循环

语法结构：

 //do while 循环 语法结构
        do {
            //循环体
        } while (条件表达式)

 <script>
        //do while 循环 语法结构
        do {
            //循环体
        } while (条件表达式)
        //2.执行思路：跟while不同的地方在于 do while 先执行一次循环体再判断条件，如果条件表达式为真就继续，否则退出；
        //3.代码验证
        var i = 1;
        do {
            console.log('how are you?');
            i++;
        } while (i <= 100)
        //4.我们的循环体最少执行一次
    </script>

与其他循环不同的是：do while至少会执行一次循环

循环小结：

• JS有三种循环你：for,while,do while
• 三个循环很多情况下都是可以互相替代的
• 如果是用来计数，跟数字相关的，三者使用基本相同。但我们更喜欢用for
• while和do while可以做一些更为复杂的判断，比for循环更为灵活一些
• while 和do while执行顺序不一样，do…while循环先执行一次再判断执行

continue关键字

continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）

例如：

吃5个包子，发现第三个有虫子，就扔掉第三个，继续吃第四个第5个包子，代码实现如下：

<script>
        //continue关键字
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {//处理第三个有虫子的包子
                continue;
            }
            console.log('我正在吃第' + i + '个包子');
        }
    </script>

<script>
        //1.求1~100之间，除了能被7整除之外的整数和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            } else {
                sum += i;
            }
        }
        alert(sum)
    </script>

break关键字

break关键字用于立即跳出整个循环（循环结束）

例如：吃5个包子，吃到第三个包子发现里面有半个虫子，其余的就不吃了，其代码实现如下：

 <script>
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break; //跳出循环
            }
            console.log('我正在吃第' + i + '个包子');
        }
    </script>

js的命名规范和格式

• 变量、函数的命名必须要有意义
• 变量名称一般用名词
• 函数的名称一般为动词

操作符规范

<script>
        //操作符的左右两侧各保留一个空格
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break; //跳出循环
            }
            console.log('我正在吃第' + i + '个包子');
        }
    </script>