前端第二阶段-8（JavaScript的双重for循环、break及continue用法）

BadVictory

已于 2022-08-18 10:11:19 修改

阅读量798

点赞数

分类专栏： # 前端开发第二阶段文章标签：前端 html5 javascript visual studio code

于 2022-08-17 22:31:41 首次发布

本文链接：https://blog.youkuaiyun.com/Victory_bad/article/details/126395375

版权

前端开发第二阶段专栏收录该内容

17 篇文章

订阅专栏

双重for循环

语法：

for(初始值;循环次数;步长;){

循环体

for(初始值;循环次数;步长;){

循环体

}

例1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 双重for循环

    // 第一个for循环时几排
    // 嵌套的for循环是一排中有几个
    for (let i = 1; i <= 2; ++i) {
        for (let j = 1; j <= 3; ++j) {
            console.log("i=" + i + "\t", "j=" + j + "\t");
        }
    }
    /*
        循环步骤：
        外层for第一次 
            内嵌for第一次 i=1 j=1
            内嵌for第二次 i=1 j=2
            内嵌for第三次 i=1 j=3
        外层for第二次 
            内嵌for第一次 i=2 j=1
            内嵌for第二次 i=2 j=2
            内嵌for第三次 i=2 j=3
    */ 

</script>

</html>

例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 双重for循环

    // 第一个for循环时几排
    // 嵌套的for循环是一排中有几个
    for (let i = 0; i < 5; ++i) {
        for (let j = 0; j < 5; ++j) {
            if (i==3) {
                break;
            }
            console.log("i=" + i + "\t", "j=" + j + "\t");
        }
    }
    /*
    循环步骤：
    外层for第一次 true
            i=0 j=0
            i=0 j=1
            i=0 j=2
            i=0 j=3
            i=0 j=4
    外层for第二次 true
            i=1 j=0
            i=1 j=1
            i=1 j=2
            i=1 j=3
    外层for第三次 true
            i=2 j=0
            i=2 j=1
            i=2 j=2
            i=2 j=3
    外层for第四次 false
            跳出内层循环
    外层for第五次 true
            i=4 j=0
            i=4 j=1
            i=4 j=2
            i=4 j=3        

    */ 

</script>

</html>

break

跳出循环，退出当前的整个循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // break 跳出循环，终止当前整个循环
    /*
        遇到数字 7 就退出循环
    */ 
    for(let i=1;i<=10;++i){
        if(i===7){
            break;     
        }
        console.log("\n",i);
    }
</script>
</html>

continue

跳出循环，退出本次的循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // continue 跳出循环，结束本次循环
    /*
        输出1-100中7的倍数
    */ 
    for(let i=1;i<=100;++i){
        if(i%7!==0){
            continue;
        }
        console.log("\n",i);
    }
    
</script>
</html>