【JavaScript】JavaScript 程序流程控制 ④ ( for 循环执行相同 / 不同的代码 | for 循环示例 )

韩曙亮

发布于 2024-03-25 08:17:24

1160

发布于 2024-03-25 08:17:24

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

一、for 循环执行相同 / 不同的

1、for 循环执行相同的代码

在 for 循环中 , 不管循环控制变量如何变化 , 在循环体中执行相同的代码即可 ;

代码示例 :

        // 1. for 循环执行相同的代码
        // 循环控制变量定义 : var i = 0
        // 循环终止条件 : i < 3
        // 循环控制变量变化方式 : i++
        for (var i = 0; i < 3; i++) {
            // 循环体
            console.log("循环执行相同的代码");
        }

2、for 循环执行不同的代码

在 for 循环中 , 可以执行不同的代码 , 根据循环控制变量的变化 , 执行不同的代码 ;

只要在循环体中 , 执行的代码与循环控制变量相关 , 则每次执行的循环体都是不同的代码 ;

代码示例 :

        // 2. for 循环执行不同的代码
        // 循环控制变量定义 : var i = 0
        // 循环终止条件 : i < 3
        // 循环控制变量变化方式 : i++
        for (var i = 0; i < 3; i++) {
            // 循环体
            console.log("循环执行不同的代码 " + i);
        }

3、完整代码示例

代码示例 :

<!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>
        // 循环控制流程

        // 1. for 循环执行相同的代码
        // 循环控制变量定义 : var i = 0
        // 循环终止条件 : i < 3
        // 循环控制变量变化方式 : i++
        for (var i = 0; i < 3; i++) {
            // 循环体
            console.log("循环执行相同的代码");
        }

        // 2. for 循环执行不同的代码
        // 循环控制变量定义 : var i = 0
        // 循环终止条件 : i < 3
        // 循环控制变量变化方式 : i++
        for (var i = 0; i < 3; i++) {
            // 循环体
            console.log("循环执行不同的代码 " + i);
        }
    </script>
</head>

<body>
</body>

</html>

执行结果 :

二、for 循环示例

1、计算 1 - 10 之间的整数累加和

使用循环完成 " 计算 1 - 10 之间的整数累加和 " 操作 ;

构造循环控制要素 :

循环控制变量定义 : var i = 1
循环终止条件 : i <= 10
循环控制变量变化方式 : i++

此外 , 还需要构造一个变量存储计算后的累加值 num , 初始值为 0 ;

代码示例 :

<!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>
        // 循环控制流程

        // 累加和
        var num = 0;

        // 计算 1 - 10 之间的整数累加和
        // 循环控制变量定义 : var i = 1
        // 循环终止条件 : i < 10
        // 循环控制变量变化方式 : i++
        for (var i = 1; i <= 10; i++) {
            // 循环体
            num += i;
        }
        console.log('num = ' + num);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、分别计算 1 - 100 之间的奇数 / 偶数之和

使用循环完成 " 分别计算 1 - 100 之间的奇数 / 偶数之和 " 操作 ;

构造循环控制要素 :

循环控制变量定义 : var i = 1
循环终止条件 : i <= 10
循环控制变量变化方式 : i++

此外 , 还需要分别构造 2 个变量分别存储偶数和奇数的累加值 num , 初始值都为 0 ;

代码示例 :

<!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>
        // 循环控制流程

        // 偶数累加和
        var eve = 0;
        // 奇数累加和
        var odd = 0;

        // 计算 1 - 10 之间的整数累加和
        // 循环控制变量定义 : var i = 1
        // 循环终止条件 : i <= 100
        // 循环控制变量变化方式 : i++
        for (var i = 1; i <= 100; i++) {
            // 循环体
            if (i % 2 == 0) {
                // 偶数
                eve += i;
            } else if (i % 2 == 1) {
                // 奇数
                odd += i;
            }
        }
        console.log('eve = ' + eve + ' , odd = ' + odd);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

3、计算指定个数的数值的累加值

使用循环完成 " 计算指定个数的数值的累加值 " 操作 ;

首先 , 通过 prompt 函数 , 使用 count 变量接收该数值 , 作为循环次数 ;

构造循环控制要素 : 循环 count 次 ;

循环控制变量定义 : var i = 0
循环终止条件 : i < count
循环控制变量变化方式 : i++

在循环体中 , 通过 prompt 函数接收 count 个数值 , 使用累加值变量 sum 接收该数值 , sum 变量初始值为 0 ;

使用 prompt 函数接收的是一个字符串类型的变量 , 需要使用 parseInt 或者 parseFloat 函数 , 将字符串转为数值类型 ;

代码示例 :

<!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>
        // 循环控制流程

        // 累加值
        var sum = 0;

        // 数值个数
        var count = prompt("请输入数值个数 (循环次数)");

        for (var i = 0; i < count; i++) {
            // 循环体
            var tmp = prompt("请输入数值 " + i);
            sum += parseInt(tmp);
        }
        console.log('sum = ' + sum);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

首先输入数值个数 , 这个数值也是循环次数 , 这里输入 3 个 , 然后弹出 3 次输入框 , 输入 3 个数值 , 将其累加并将最终累加值打印到浏览器控制台 ;

4、在同一行中循环打印相同的字符

使用循环完成 " 在同一行中循环打印相同的字符 " 操作 ;

使用 console.log 函数 , 打印出来的字符串内容 , 会自动换行 , 因此在同一行内循环打印相同的字符 , 需要在循环体内进行字符串拼接操作 ;

构造循环控制要素 : 循环 3 次 ;

循环控制变量定义 : var i = 0
循环终止条件 : i < 3
循环控制变量变化方式 : i++

代码示例 :

<!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>
        // 循环控制流程

        // 要拼接的字符串
        var str = "";

        for (var i = 0; i < 3; i++) {
            // 循环体
            str += "▲"
        }
        console.log(str);
    </script>
</head>

<body>
</body>

</html>

执行结果 :