JavaScript流程控制详解之循环结构(倒三角、九九乘法表)

循环结构

在JavaScript中，循环语句指的是在满足某个条件下重复执行 指定的一段代码。若条件结果为true,则重复执行，则进入循环，否则结束循环。

在JavaScript中，循环语句如下：

• while语句
• do…while语句
• for语句

while语句

JavaScript中while语句创建一个循环，只要条件返回结果为true，该循环就会执行循环体

语法：

while (条件表达式) {
   // 当条件为true时，则执行循环体
    statements;
}

怎么运行的？

• 如果条件返回结果为true，则会执行大括号里的循环体statements
• 当执行完大括号里的循环体statement后，会再次判断条件。如果条件返回结果仍然是true，则会继续执行大括号里的循环体，直到条件返回结果为false，则结束整个循环，然后再执行while语句后面的程序

while循环结构工作原理

示例：计算1+2+3+…+100的值

<script>
			var num=1;
			var sum=0;
			while(num<=100)
			{
				sum+=num;
				++num;
			}
			console.log("1+2+3...+100="+sum);
</script>

运行结果

1+2+3...+100=5050

怎么实现？

• 初始化两个变量：num赋值为1，用于遍历1到100的整数，sum赋值为0，用于存储累加的结果
• 使用while循环语句，条件是num<=100，只要num的值小于或等于100，循环就会继续执行下去
• 在循环体中，将当前数值num累加到sum上，即sum+=num
• 通过自增运算符，将num的值加一
• 当num值大于100时，循环结束
• 最后，用console.log()函数打印出计算结果

do…while语句

do…while循环语句创建一个循环，该循环执行循环体，直到条件计算结果为false

语法：

do{
    //如果条件结果返回true,则执行该循环体
    statements;
}while(条件);

• 与while循环语句不同，do…while语句首先会无条件执行循环体statements一次，然后再判断是否符合条件。
• 如果符合条件，则重复执行循环体；如果不符合条件，则退出循环，执行循环后面的语句
• do…while语句跟while语句非常相似，并且任何一个都可以转换成等价的另外一个
• do…while语句结尾处括号后后有一个分号（;）,该分号不能省略

注意：从后面ES6+版本开始，while(条件)后面的分号（;）是可选的

do…whileu循环语句工作原理

do…while在实践中，当您希望在检查条件之前至少执行一次循环体时，通常会使用该语句。

示例

	<script>
			var num=0;
			do{
				console.log(num);
				num++;
			}while(num<5)
			
	</script>

运行结果

0
1
2
3
4

• 初始化一个变量num并赋值为0，用于记录循环计数
• 使用do…while循环。首先执行一次循环体statements内的代码，然后再检查是否满足继续循环
• 在循环体内，通过console.log()函数打印出当前num的值
• 然后使用后置自增运算符将num的值加1，继续循环
• 循环的条件是num<5，只要num的值小于5，就会继续执行循环体内的代码
• 每次循环都会使num的值加1，并分别输出当前num的值

while语句

• 先判断、后循环

do…while

• 先循环、后判断

for 语句

for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。

for循环语句创建一个具有三个可选表达式的循环

语法：

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

• 初始化表达式：这是用于初始化一个计数器。该表达式可以使用var或let关键字声明新的变量，使用var声明的变量不是该循环的局部变量，而是与for循环处在同样的作用域中。用let声明的变量是语句的局部变量
• 条件表达式：一个条件表达式被用于确定每一次循环是否被执行。如果表达式的结果为true，则循环体statements将被执行。这个表达式是可选的。如果被忽略，则被认为永远为真。如果计算结果为false，那么执行流程将跳出循环
• 循环后操作：每次循环体执行后都要执行的表达式。通常被用于更新或者自增计数器变量

上述循环控制参数之间使用分号;间隔开。

for循环语句工作原理

示例：

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

运行结果

1
2
3
4

怎么运行的？

• 首先，声明一个变量i并赋值为1
• 其次，如果i的值小于5，则执行循环体输出i值
• 每次循环i的值都会增加1

在for循环中，三个表达式是可选的

for( ; ; )
    {
	statements；
    }

使用for语句在没有初始化表达式的循环

var j=1;
	for( ;j<10;j+=2)
	{
		console.log(j);
	}

输出

1
3
5
7
9

for语句不使用条件的循环

条件表达式是可选的，如果省略条件表达式，则需要break语句来终止循环

for(var x=1;  ;x+=2)
	{
	console.log(x);
	if(x>10){
			break;
		}
	}

输出

1
3
5
7
9
11

中止循环

break语句提前终止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

continue语句会终止当前本次循环，并立即继续下一次迭代。一般用于排除或者跳过某一个选项的时候

示例：break中止

<script>
			var i=1;
			while(i<=5)
			{
				console.log(i);
				if(i === 3){
					break;
				}
				i++;
			}
	</script>

输出：

1
2
3

示例：continue中止

<script>
			var i=1;
			while(i<=5)
			{
				console.log(i);
				if(i === 3){
					continue
				}
				i++;
			}
</script>

输出

1
2
4
5

循环实战

倒三角

 // 外层打印几行
for (let i = 1; i <= 5; i++) {
    // 里层打印几个星星
    for (let j = 1; j <= i; j++) {
        document.write('★')
    }
    document.write('<br>')
}

九九乘法表

样式css

div {
    display: inline-block;
    width: 100px;
    padding: 5px 10px;
    border: 1px solid pink;
    margin: 2px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);
    background-color: rgba(255, 192, 203, 0.1);
    text-align: center;
    color: hotpink;
}

js文件

 // 外层打印几行
for (let i = 1; i <= 9; i++) {
    // 里层打印几个星星
    for (let j = 1; j <= i; j++) {
        // 只需要吧 ★ 换成  1 x 1 = 1   
        document.write(`
		<div> ${j} x ${i} = ${j * i} </div>
     `)
    }
    document.write('<br>')
}