JS基础必读——循环

视频链接：https://www.bilibili.com/video/BV1ux411d75J?p=69
点击观看视频

循环目的

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

1.JS中的循环

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

• for循环
• while循环
• do…while循环

2. for循环

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

2.1 语法结构

for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

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

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

	for(var i=1; i<=100; i++){
		console.log('你好吗');
	}

2.2 for循环的执行过程

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

2.3 断点调试

2.4 for循环重复不相同的代码

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

//我们有计算器变量i的存在 i每次循环值都会变化
// 我们想要输出1个人 1~100岁
for(var i = 1; i<=100; i++){
	console.log('这个人今年'+i+'岁了');
}

for循环与if…else if…结合使用

for(var i = 1; i<=100; i++){
	if(i == 1){
		console.log('这个人今年1岁了,她出生了');
	}else if(i==100){
		console.log('这个人今年100岁了,她死了');
	}else{
		console.log('这个人今年'+i+'岁了');
	}
}

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

for循环因为有了计算器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。
案例：
需求：求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;
}
console.log(sum) //5050

3. 双重for循环

3.1 双重for循环概述

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for循环语句我们称之为双重for循环。

// 1.双重for循环 语法结构
for(外层的初始化变量；外层的条件表达式；外层的操作表达式){
	for(外层的初始化变量；外层的条件表达式；外层的操作表达式){
			//执行语句；
	}
}
//2.我们可以把里面的循环看做是外层循环语句
//3.外层循环循环一次，里面的循环执行全部
for(var i=1; i<=3;i++){
	console.log('这是外层循环第'+i+'次');
	for(var j=1;j<=3; j++){
		console.log('这是里层循环第'+j+'次');
	}
}

3.2 双重for循环的执行过程

结果：外层循环1次，里层循环3次

3.3打印5行5列的星星

	var str='';
	for(var i=1; i<=5; i++){	//1 2 3 4 5   外层循环打印5行
		for(var j= 1; j<=5; j++){	//5个★ 5个★ 5个★ 5个★ 5个★  里层循环负责一行打印5个★
			str +='★';
		}
		str+='\n';//如果一行打印完毕5个星星就要另起一行 加\n
	}
	console.log(str);

结果：

3.4打印倒三角的星星

需求：打印倒三角的星星
案例分析：
1.一共有10行，但是每行的星星个数不一样，因此需要用到双重for循环。
2.外层的for控制行数i,循环10次可以打印10。
3.内层的for控制每行的星星个数j。

	var str='';
	for(var i=1; i<=10; i++){	//1 2 3 4 5...   外层循环打印10行
		for(var j= i; j<=10; j++){	//10个★ 9个★ 8个★ 7个★ 6个★..  里层循环负责一行打印的个数不一样 j=i
			str +='★';
		}
		str+='\n';//如果一行打印完毕就要另起一行 加\n
	}
	console.log(str);

结果：

3.5 双重for循环小结

• for循环可以重复执行某些相同代码
• for循环可以重复执行些许不同的代码，因为我们有计数器
• for循环可以重复执行某些操作，比如算术运算符加法操作
• 随着需求增加，双重for循环可以做更多、更好看的效果
• 双重for循环，外层循环一次，内层for循环全部执行
• for循环是循环条件和数字直接相关的循环
• 分析要比写代码更重要
• 一些核心算法想不到，但是要学会，分析他执行过程
• 举一反三，自己经常总结，做一些相似的案例

4. while循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下：

while(条件表达式){
	//循环体代码
}

执行思路：
1.先执行条件表达式，如果结果为true，则执行循环体代码；如果为false,则退出循环，执行后面代码
2.执行循环体代码
3.循环体代码执行完毕后，程序会继续判断执行条件表达式，如果条件仍为true，则会继续执行循环体，直到循环条件为false

var num = 1;
while(num <=100){
	console.log('你好啊！');
	num++;
}

结果：

注意变量循环一次递增一次，避免进入死循环。

4.1 案例

需求：计算1~100之间所有整数的和

var sum = 0;
var i=1;
while(i<=100){
	sum+=i;
	i++;
}
console.log(sum);

结果：5050

5. do while循环

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

while语句的语法结构如下：

do{
	//循环体代码
}
while(条件表达式)

执行思路：
跟while不同的地方在于 do while 先执行一次循环体再判断条件表达式，如果条件表达式结果为true，则继续执行循环体代码；如果为false,则退出循环，执行后面代码

var i =1;
do{
	console.log('你还好吗？');
	i++;	//2
}while(i<2)

结果：条件表达式结果为false也会先执行一次循环体。