Web前端，JS基础之for循环

最新推荐文章于 2024-07-31 14:35:30 发布

星辰迷上大海

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量4.1k

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_37255976/article/details/125430547

版权

JavaScript 专栏收录该内容

104 篇文章 1 订阅

订阅专栏

前言

持续学习总结输出中，今天分享的是Web前端，JS基础之for循环

for循环基本使用

循环可以将代码块执行指定的次数。也是重复执行代码。

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

好处:把声明起始值、循环条件、变化值写到一起，让人一目了然

<!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>循环语句</title>
</head>

<body>
    <script>
        // for (起始条件; 退出条件; 变化量) {
        //     循环语句
        // }
        for (let i = 1; i <= 10; i++) {
            document.write(`人永远都无法知道自己该要什么，因为人只能活一次 ${i} <br>`)
        }
    </script>
</body>

</html>

运行结果：
请添加图片描述

<!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>for循环</title>
</head>

<body>
    <script>
        // 1. 循环的最大价值就是遍历数组
        let arr = ['小超', '小云', '小飞', '小羽', '小黄', '小星']
        // 利用循环的方式
        document.write(arr.length)
        // 2. arr.length  数组的长度  通过他可以告诉我们数组里面有几个元素
        for (let i = 0; i < arr.length; i++) {
            document.write(`名字 ${i}: ${arr[i]} <br>`)
        }

    </script>
</body>

</html>

运行结果：
请添加图片描述

小结
1. for循环和while循环有什么区别呢:
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

退出循环

continue和break的区别
continue:退出本次循环，继续下一次循环
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>continue</title>
</head>

<body>
    <script>
        for (let i = 1; i < 6; i++) {
            if (i === 2) {
                continue  // 1345 继续 退出本次循环，继续下一次循环
            }
            document.write(i)
        }
    </script>
</body>

</html>

运行结果：
请添加图片描述

<!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>break</title>
</head>

<body>
    <script>
        for (let i = 1; i < 6; i++) {
            if (i === 2) {
                break  // 结束循环 退出整个循环
            }
            document.write(i)
        }
    </script>
</body>

</html>

运行结果：
在这里插入图片描述

循环嵌套

<!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>循环嵌套</title>
</head>

<body>
    <script>
        // 循环嵌套
        for (let i = 1; i < 6; i++) {
            for (let j = 1; j < 6; j++) {
                document.write('星辰迷上大海<br>')
            }
        }
        // 外面循环执行一次，里面循环执行全部（5次）
    </script>
</body>

</html>

运行结果：
请添加图片描述

一个循环里再套一个循环，一般用在for循环里

打印倒三角形星星
分析:
1、利用双重for循环来做
2、外层循环控制打印行，内层循环控制每行打印几个(列)
3、内层循环的个数跟第几行是一一对应的

<!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>倒三角形星星</title>
</head>

<body>

    <script>
        // 外层打印几行
        for (let i = 1; i <= 5; i++) {
            // 里层打印几个星星
            for (let j = 1; j <= i; j++) {
                document.write('★')
            }
            document.write('<br>')
        }
    </script>
</body>

</html>

运行结果：
在这里插入图片描述

总结

在这里插入图片描述

最后分享一句话：

人永远都无法知道自己该要什么，因为人只能活一次
《不能承受的生命之轻》——米兰.昆德拉

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！

星辰迷上大海

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端，JS基础之for循环

持续学习总结输出中，今天分享的是Web前端，JS基础之for循环循环可以将代码块执行指定的次数。也是重复执行代码。如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。...
复制链接

扫一扫