JS — 12 循环 for while do...while

最新推荐文章于 2022-05-24 13:53:14 发布

小郭呀~

最新推荐文章于 2022-05-24 13:53:14 发布

阅读量270

点赞数

分类专栏： JS上课笔记

本文链接：https://blog.csdn.net/weixin_46448458/article/details/106753214

版权

JS上课笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

循环的作用

循环 : 做重复的事情,快速实现代码的重复多次的执行

一、for循环

for 循环 :  能精确控制次数的循环

1.格式

for ( A; B; C ){
	语句D
}

2.格式分解

A : 循环的初始化,只执行一次
B : 循环的结束条件,结果是布尔类型
	true → 循环没有结束
	false → 循环结束
C : 循环单次之后的状态改变
D : 需要循环的代码

3.执行顺序

A →  B → D → C → B → D → C → ..... → B
for循环中 BD 必不可少
B => 结束条件,如果没有结束条件,就会死循环

4.固定次数循环的标准写法

let length = 5;//循环5次
for ( let i = 0; i < length; i++ ){
	console.log( "小郭" );//打印5次
	console.log( i );//打印0,1,2,3,4 => 从0开始,到length-1为止
}

5.案例

a.输出数组中的每一项

let arr = [ "小郭", "小张", "小李", "小王" ];
for ( i = 0; i < arr.length; i++){
	console.log( arr[i] );//遍历数组
}

b.在ul标签里面添加li标签,li标签里面是数组里面的每一项

<ul id="list"></ul>

let arr_b = [ "商品A", "商品B", "商品C","商品D"];
let list = document.getElementById("list");
for ( i = 0; i < arr_b.length; i++ ){
	let li = "<li>" + arr_b[i] + "</li>";
	//list.innerHTML += li;//正序
	list.innerHTML = li + list.innerHTML;//倒序

6.高端讨打的for循环(了解)

循环打印数组里的每一项

let arr_c = [ "张三","李四","某某某" ];

a.写法一

let j = 0;
for ( ; j < arr_c.length ; ){
	console.log( arr_c[j] );
	j ++;
}

b.写法二

let k = 0;
for ( ; arr_c[k]; ){
	console.log (arr_c[k++] );
}

c.写法三

let m = 0;
let obj = null;
for ( ; obj = arr_c[m++]; ){
	console.log( obj );
}

7.死循环

a.写法一

for ( ; ;  ){//没有规定结束条件
	console.log( "小郭" );//死循环,一直打印
}

b.写法二

for ( ; true ;  ){//结束条件一直是true,true表示循环没有结束
	console.log( "小郭" );//死循环,一直打印
}

8.循环嵌套

外层循环一次,里面循环完一遍,总循环次数是乘积

a.循环嵌套案例

for ( let i = 0; i < 5; i++ ){//里层循环5次
	for ( let j = 0; j < 7; j++ ){//里层循环7次
		console.log( "小郭" );//打印35遍 5*7=35
	}
}

b.用 i j 写一个表达式,打印出0-34

for ( let i = 0; i < 5; i++ ){
	for ( let j = 0; j < 7; j++ ){
		let count = i * 7 + j;
		console.log( count );
	}
}

9.打断for循环

打断for循环有两种方式:
break : 在for循环的循环体中,可以使用break直接结束循环
continue : 循环时执行到continue的话,当前这一次的循环体立即结束

for ( i = 0; i < 10; i++ ){
	if( i === 5 ){
		break;
	}
	console.log(i);//0,1,2,3,4,5
}

for ( i = 0; i < 10; i++ ){
	if( i === 5 ){
		continue;
	}
	console.log(i);//0,1,2,3,4,6,7,8,9
}

二、while循环

执行规则

先判断,再决定要不要执行循环体,再判断...

示例一

let i = 0;
for ( ; i < 5; ){
	console.log( i );// 0 1 2 3 4
	i++;
}

上述是使用for循环写的,它等价于下面的while循环

let i = 0;
while ( i < 5 ){
	console.log( i );// 0 1 2 3 4
	i++;
}

示例二

let k = 0;
while ( k < 5 ){//k为 0 1 2 3 4
	console.log( 1 );//打印5次1 
	k++;
}

示例三

let a = 5;
while( a > 6 ){
	a++;
}
console.log( a );//打印5 => 先判断,结果为false,不执行循环体

三、do…while…循环

执行规则

先执行一次循环体,再判断...

示例一

let m = 5;
do{
	console.log( 1 );//打印1次1
	m++;
}while( m < 4 );

示例二

let n = 0;
do{
	console.log( 1 );//打印5次1
	n++;// 0 1 2 3 4
}while( n < 5 );

示例三

let b = 5;
do{
	b++;
}while( b > 6 );
console.log ( b );//打印6 先执行b++ 得到b = 6

四、笔记源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
</head>
<body>
    <ul id="list"></ul>
    <script>
        /*
        *   循环 => 做重复的事情 => 快速实现代码的重复多次的执行,循环
        ***********************************************************************
        *
        *   for 循环 => 能精确控制次数的循环
        *
        *       格式:
        *           for (A; B; C){
        *               语句D
        *           }
        *
        *           B => 循环的结束条件 => 布尔类型 => true 循环没有结束 false 循环结束
        *           D => 需要被循环的代码
        *           A => 循环的初始化 只执行一次
        *           C => 循环单次之后的状态改变
        *
        *           执行顺序: A => B => D => C => B => D => C ... => B
        *
        *           for循环中 BD 必不可少
        *           B => 结束条件,如果没有结束条件,就会死循环
        *
        *
        * */

        //固定次数循环的标准写法
        let length = 5;//循环5次
        for ( let i = 0; i < length; i++ ){
            console.log( "小郭" );//打印5次
            console.log( i );//打印0,1,2,3,4 => 从0开始,到length-1为止
        }

        //输出数组中的每一项
        let arr = [ "小郭", "小张", "小李", "小王" ];
        for ( i = 0; i < arr.length; i++){
            console.log( arr[i] );//遍历数组
        }

        //在ul标签里面添加li标签,li标签里面是数组里面的每一项
        let arr_b = [ "商品A", "商品B", "商品C","商品D"];
        let list = document.getElementById("list");
        for ( i = 0; i < arr_b.length; i++ ){
            let li = "<li>" + arr_b[i] + "</li>";
            //list.innerHTML += li;//正序
            list.innerHTML = li + list.innerHTML;//倒序
        }

        /*********************************************************************/
        //高端讨打的for循环 (了解)

        //循环打印数组里面的每一项
        let arr_c = [ "张三","李四","某某某" ];

        //写法一
        let j = 0;
        for ( ; j < arr_c.length ; ){
            console.log( arr_c[j] );
            j ++;
        }

        //写法二
        let k = 0;
        for ( ; arr_c[k]; ){
            console.log (arr_c[k++] );
        }

        //写法三
        let m = 0;
        let obj = null;
        for ( ; obj = arr_c[m++]; ){
            console.log( obj );
        }

        /*********************************************************************/
        //循环嵌套 => 外层循环一次,里面循环完一遍,总循环次数是乘积
        for ( let i = 0; i < 5; i++ ){//里层循环5次
            for ( let j = 0; j < 7; j++ ){//里层循环7次
                console.log( "小郭" );//打印35遍 5*7=35
            }
        }

        //用 i j 写一个表达式,打印出0-34
        for ( let i = 0; i < 5; i++ ){
            for ( let j = 0; j < 7; j++ ){
                let count = i * 7 + j;
                console.log( count );
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
</head>
<body>
    <script>
        /*let i = 0;
        for ( ; i < 5; ){
            console.log( i );
            i++;
        }*/

        //等价↓↓↓↓↓

        let i = 0;
        while ( i < 5 ){
            console.log( i );
            i++;
        }

        //while => 先判断,再决定要不要执行循环体,再判断...
        let j = 5;
        while ( j < 4 ){
            console.log( 1 );//不打印
            j++;
        }

        //do...while => 先执行一次循环体,再判断...
        let m = 5;
        do{
            console.log( 1 );//打印1次1
            m++;
        }while( m < 4 );

        let k = 0;
        while ( k < 5 ){
            console.log( 1 );//打印5次1
            k++;
        }

        let n = 0;
        do{
            console.log( 1 );//打印5次1
            n++;
        }while( n < 5 );

        let a = 5;
        while( a > 6 ){
            a++;
        }
        console.log( a );//打印5 => 先判断,结果为false,不执行循环体

        let b = 5;
        do{
            b++;
        }while( b > 6 );
        console.log ( b );//打印6

    </script>
</body>
</html>