【JavaScript】 8 - JavaScript流程控制-循环

JavaScript流程控制-循环

需要思考以下问题：

1. 循环的目的是什么？
2. for循环的执行过程是怎样的？
3. 如何使用断点调试来观察代码的执行过程？
4. while循环和do while循环的区别在哪？
5. break和continue的区别在哪？

1、循环

循环目的：

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。

        //循环的目的: 可以重复执行某些代码
        console.log('豆沙真的菜！');
		//循环打印一百次
        for (i = 0; i < 100; i++) {
   
            console.log('豆沙真的菜！');
        }

JS中的循环

在 JS 中，主要有三种类型的循环语句：

• for循环；
• while循环；
• do...while 循环；

1.1 - for循环

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

for 重复执行某些代码， 通常跟计数有关系。

1.1.1 - for语法结构

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

• 初始化变量就是用var声明的一个普通变量， 通常用于作为计数器使用；
• 条件表达式就是用来决定每一 次循环是否继续执行就是终止的条件；
• 操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新（递增或者递减）；

1.1.2 - for循环的执行过程

		//循环打印一百次
        for (i = 0; i < 100; i++) {
   
            console.log('豆沙真的菜！');
        }

1. 首先执行里面的计数器变量var i= 1。但是这句话在for里面只执行一次；
2. 去i<100来判断是否满足条件，如果满足条件，就去执行循环体不满足条件退出循环；
3. 最后去执行i++； 一轮结束；
4. 接着去执行i<100，如果满足条件就去执行循环体不满足条件退出循环第二轮。

2、断点调试：

1. 断点调试是指自己在程序的某一行设置一个断点 ；
2. 调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试；
3. 调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行的显示错误，停下。

断点调试可以帮我们观察程序的运行过程：

浏览器中按F12------- sources -----找到需要调试的文件------在程序的某一行设置断点

• Watch：监视，通过watch可以监视变量的值的变化，非常的常用。

• F11：程序单步执行，让程序一步一步的执行；这个时候，观察watch中变量的值的变化。

• 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。

• 初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会,但是代码调试这个东西，自己不去练，永远都学不会。

2.1 - for循环重复相同的代码

        // for循环可以执行相同的代码
        for (i = 0; i < 100; i++) {
   
            console.log('豆沙真的菜！');
        }
        //我们可以让用户控制输出的次数
        var num = prompt("请输入循环次数")
        for (i = 0; i < num; i++) {
   
            console.log('豆沙真的菜！');
        }

2.2 - for循环重复不相同的代码

for循环可以重复执行不同的代码；因为我们有计数器变量i的存在；i每次循环值都会变化。

        for (i = 1; i < 6; i++) {
   
            console.log('豆沙' + i + '岁了');
        }

2.3 - for循环重复某些相同操作

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

课堂案例1：

1.1 - 求1-100之间所有整数的累加和。

案例分析:

1. 需要循环100次,我们需要一个计数器i；
2. 我们需要一个存储结果的变量sum ,但是初始值一定是0；
3. 核心算法：1+2 +3+ 4....... sum = sum + i；

        var sum = 0; //求和的变量
        for (var i = 1; i <= 100; i++) {
   
            sum += i; //sum=sum+i;
        }
        console.log(sum);//5050

1.2 - 求1-100之间所有数的平均值。

        var sum