JavaScript学习_基础_06_循环（for、while、do-while）

最新推荐文章于 2022-12-03 14:56:41 发布

学迁

最新推荐文章于 2022-12-03 14:56:41 发布

阅读量575

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/jiang1126/article/details/120294654

版权

JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、for循环

语法格式

for (【一般是初始化表达式】;【一般都是条件表达式】;【自增自减表达式】)
{
	循环体（代码块）;
}

比如打印1~10：

for(a=1;a<=10;a++) // a是循环变量
{
    document.write(a);
    document.write('<br>');
}

执行过程

第一次循环：

首先执行初始化表达式

接着执行条件表达式

然后再去执行循环体(代码块)

最后执行自增自减表达式
非第一次循环：

执行条件表达式

执行循环体

最后执行自增自减表达式

注意点

循环变量控制着循环的次数
循环变量是有值的
for循环初始化表达式只是在第一次循环的时候执行，后面的循环全部都不执行了
for循环当中的循环变量有两个作用：
1. 控制着循环的次数
2. 值随循环次数变化而变化
死循环
```
for ( ; true ; )
{
	 console.log('死循环') ;
}
```
前端开发网页当中很少遇到死循环，除非特殊情况。

小练习

爱意满满

for ( var i = 0; i < 100; i++ ) // 初始化表达式的var可写可不写
{
	document.write('i love you! baby~') ;
	document.write('<br>') ;
}

打印1~100的数字

for ( var i = 1; i < 101; i++ )
{
	console.log(i) ;
}

打印1-100之间的偶数

for ( var i = 1; i < 101; i++ )
{
    if ( i%2 == 0 )
    {
		console.log(i) ;
    }
}

计算1到100的和

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

计算1-100之间所有偶数的和

var sum = 0 ;
for ( var i = 1; i < 101; i++ )
{
	if ( i % 2 == 0 )
	{
		sum += i ;
	}
}
console.log(sum) ;

嵌套循环

嵌套循环： 在一个循环当中又出现另外一个循环，外层循环控制行，内层循环控制列。

打印矩形

使用单层循环：

for ( var i = 0; i < 5; i++ )
{
	document.write('*****') ;
    document.write('<br>') ;
}

使用嵌套循环：

for ( var i = 0; i < 5; i++ )
{
	for( var j = 0; j < 5; j++ )
	{
		document.write('*') ;
    }
	document.write('<br>') ;
}

打印直角三角形

for ( var i = 0; i < 5; i++ )
{
	for ( var j = 0; j <= i; j++ ) // 内层循环每次打印个数递增
	{
		document.write('*') ;
	}
	document.write('<br>') ;
}

打印乘法口诀表

for ( var i = 1; i <= 9; i++ )
{
	for ( var j = 1; j <= i; j++ )
	{
		document.write(j + '*' + i + '=' + i*j);
		//拼接字符串
		document.write('&nbsp;&nbsp;&nbsp;');
	}
	document.write('<br>');
}

二、while循环和do-while循环

while

while循环由for循环转变而来，只要是for循环能干的while都能干。

for循环一般有明显的循环次数，while循环一般没有明显的次数。

对比：打印1~100

使用for循环

// 方法一
for ( var i = 1; i < 101; i++ )
{
	console.log(i) ;
}

// 方法二
var i = 1 ;
for ( ; i < 101; )
{
    console.log(i) ;
    i++ ;
}

使用while循环

var i = 1 ;
while ( i < 101 )
{
    console.log(i) ;
    i++ ;
}

对比：死循环

for
```
for ( ; true; )
{

}
```
while
```
while (true)
{

} 
```

do-while

do-while又是由while演变而来的。

do-while和while的区别在于：

while循环先判断条件是否为真，再决定是否执行循环体。如果条件为真就执行，为假就不会执行循环体，条件不为真，一次都不执行。
do-while是先执行一次循环体，再去判断条件，条件为真则继续执行循环体，条件为假则不会执行循环体。
do-while无论条件是否为真，都会至少执行一次循环体。

检验

var i = 101;
do{
    console.log(i) ; // 101  i<101不成立，但这次还是执行了
    i++ ;
}while ( i < 101 ) ;

关于使用场景的问题

什么时候用for： for循环一般有明显的循环次数，这时候用for循环比较容易

什么时候用while： while循环一般没有明显的次数，这时候用它最合适

三、break和continue

break

在循环当中，跳出离它最近的那一层循环。如果是多层循环要注意。

continue

结束当前循环（continue以下的代码不会执行了，从下一次循环开始继续）

案例：打印0~100以内所有的能被3整除的数字

常规思路

for ( var i = 0; i < 101; i++ )
{
	if ( i % 3 == 0 )
	{
		console.log(i) ;
	}
}

使用continue

for ( var i = 0; i < 101; i++ )
{
    if ( i % 3 != 0 )
    {
        continue ;
    }
    console.log(i) ;
}

四、练习

打印100–200之间所有能被3或者7整除的数

for ( var i = 100; i <= 200; i++ )
{
    if ( i % 3 == 0 || i % 7 == 0 )
    {
        console.log(i) ;
    }
}

打印三位数位上有3或者7的数字

for ( var  i = 100; i <= 999; i++ )
{
    //  先求每个位上的数字
	var b = parseInt( i / 100 ) ;
    var s = parseInt( i/10%10 ) ;
    var g = i % 10 ;

    //  再进行判断
    if ( b == 3 || s == 3 || g == 3 || b == 7 || s == 7 || g == 7 )
    {
        console.log(i) ;
    }
}

计算100的阶乘 12 … 100

var ride = 1 ;
//  如果是累加，初始为0；累乘，初始为1
	for ( var i = 1; i < 101; i++ )
	{
		ride *= i ;
	}
console.log(ride) ;

求100-999之间的水仙花数。abc = a³ + b³ + c³

for ( var i = 100; i <= 999; i++ )
{
	//  先求每个位上的数字
	var b = parseInt( i / 100 ) ;
	var s = parseInt( i/10%10 ) ;
	var g = i % 10 ;

	if ( i == b*b*b + s*s*s + g*g*g )
	{
		console.log(i) ;
	}
}

输出100-200之间所有的素数（质数）（只能被1和自身整除的数）

// 方法一

var flag = true; // 标志位
for ( var i = 100; i <= 200; i++ )
{
    for ( var j = 2; j < i; j++ )
    {
        if ( i % j == 0 )
        {
            // 但凡有一个除过1和它自身以外可以被它整除的数，就改变flag标志位的状态
            flag = false;
            break;
        }
    }
    
    if ( flag )
    {
        console.log(i);
    }
    
    flag = true;
    //重置标志位，因为每个数都要重新的去循环执行；
}

// 方法二

var num = 0;
for ( var i = 100; i <= 200; i++ )
{
    for ( var j = 1; j <= i; j++ )
    {
        if ( i % j == 0 )
        {
            num++;
        }
    }
    
    if ( num == 2 )  // 计数法，只出现两个能被它整除的数，就是1和它自己
    {
        console.log(i);
    }
    num = 0;  //重置
}

求 1! + 2! + 3! + … + 20! 的值

var ride = 1;
var sum = 0;
//外层在拿数
for (var i = 1; i <= 20; i++)
{
    //内层循环在真正的累乘
    for (var j = 1; j <= i; j++)
    {
        ride *= j;
    }
    
    sum += ride;
    
    ride = 1;
    
}

console.log(sum);

完成一个等腰三角形的打印

for (var i = 0; i < 7; i++)
{
    //为了打印空格
    for (var j = 0; j < 6 - i; j++)
    {
        document.write('&nbsp;');
    }
    
    //为了打印 *
    for (var k = 0; k < 2*i + 1 ;k++)
    {
        document.write('*');
    }
    
    document.write('<br>');
}

打印圣诞树

//第一部分：等腰三角形 -- 树顶部分
for (var i = 0; i < 7; i++)
{
    //为了打印空格
    for (var j = 0; j < 6 - i; j++)
    {
        document.write('&nbsp;');
    }
    
    //为了打印*
    for (var k = 0; k < 2*i + 1 ;k++)
    {
        document.write('*');
    }
    
    document.write('<br>');
    
}

//第二部分：等腰三角形 -- 树顶下部分
for (var i = 0; i < 7; i++)
{
    //为了打印空格
    for (var j = 0; j < 6 - i; j++)
    {
        document.write('&nbsp;');
    }
    
    //为了打印*
    for (var k = 0; k < 2*i + 1 ;k++)
    {
        document.write('*');
    }
    
    document.write('<br>');
    
}

//第三部分：四边形 -- 树干部分
for (var i = 0; i < 8; i++)
{
    for (var j = 0; j < 4; j++)
    {
        document.write('&nbsp;');
    }
    for (var j = 0; j < 5; j++)
    {
        document.write('*');
    }
    document.write('<br>');
}

学迁

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习_基础_06_循环（for、while、do-while）

一、for循环语法格式for (【一般是初始化表达式】;【一般都是条件表达式】;【自增自减表达式】){ 循环体（代码块）;}比如打印1~10：for(a=1;a<=10;a++) // a是循环变量{ document.write(a); document.write('<br>');}执行过程第一次循环：首先执行初始化表达式接着执行条件表达式然后再去执行循环体(代码块)最后执行自增自减表达式非第一次循环：执行条件表达式执行循
复制链接

扫一扫