【JavaScript】JavaScript 程序流程控制 ⑤ ( 嵌套 for 循环 | 嵌套 for 循环概念 | 嵌套 for 循环语法结构 )

韩曙亮

发布于 2024-03-25 08:18:01

1030

发布于 2024-03-25 08:18:01

文章被收录于专栏：韩曙亮的移动开发专栏

一、嵌套 for 循环

1、嵌套 for 循环概念

嵌套 for 循环是一个嵌套的循环结构 , 其中一个 for 循环位于另一个 for 循环的内部 , 分别是外层 for 循环和内层 for 循环 ;

嵌套 for 循环结构常用于处理二维数组或执行需要两个索引的任务 ;

2、嵌套 for 循环语法结构

嵌套 for 循环的语法结构如下 :

for ([外层循环初始化表达式]; [外层循环条件表达式]; [外层循环更新表达式]) {  
    // 外层循环 循环体
    for ([内层循环初始化表达式]; [内层循环条件表达式]; [内层循环更新表达式]) {  
        // 内层循环 循环体   
        // 可以访问 外层循环 和 内层循环 的 循环控制变量  
    }  
    // 只能访问 外层循环 的 循环控制变量 , 不能访问 内层循环 的 循环控制变量 
}

[外层循环初始化表达式]; [外层循环条件表达式]; [外层循环更新表达式] 是外层循环的循环要素 ,

[外层循环初始化表达式] 是在循环开始之前设置循环变量的初始值 ,
[外层循环条件表达式] 是每次循环之前的检查条件 , 该表达式为 true 则执行循环体 , 否则退出循环 ;
[外层循环更新表达式] 是更新循环控制变量的表达式 ;

[内层循环初始化表达式]; [内层循环条件表达式]; [内层循环更新表达式] 是内层循环的循环要素 ,

[内层循环初始化表达式] 是在循环开始之前设置循环变量的初始值 ,
[内层循环条件表达式] 是每次循环之前的检查条件 , 该表达式为 true 则执行循环体 , 否则退出循环 ;
[内层循环更新表达式] 是更新循环控制变量的表达式 ;

二、嵌套 for 循环案例

1、打印三角形

打印 10 行三角形字符 , 第一行打印 1 个三角形 , 第二行打印 2 个三角形 , … , 第十行打印 10 个三角形 ;

外层 for 循环的循环控制变量初始值为 1 , 可以控制内存循环的打印次数为 1 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 嵌套 for 循环
        for (var i = 1; i <= 10; i++) {
            // 外层循环 循环体
            // 要拼接的字符串
            var str = "";
            for (var j = 0; j < i; j++) {
                // 内存循环 循环体
                str += "▲"
            }
            console.log(str);
        }
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、打印乘法表

乘法表一共有 9 行 ,

外层 for 循环 , 控制着循环控制变量 i 取值 1 ~ 9 ;

内存 for 循环 , 控制着循环控制变量 j 取值 1 ~ i ;

对了进行对齐 , 每个乘法式子之间使用 \t 进行间隔 ;

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 嵌套 for 循环
        for (var i = 1; i <= 9; i++) {
            // 外层循环 循环体
            // 要拼接的字符串
            var str = "";
            for (var j = 1; j <= i; j++) {
                // 内存循环 循环体
                str += j + " x " + i + " = " + (i * j) + "\t"
            }
            console.log(str);
        }
    </script>
</head>

<body>
</body>

</html>

执行结果 :