15JS06——流程控制-循环

news2025/1/13 2:40:28

目标:
1、循环
2、for循环
3、双重for循环
4、while循环
5、do while循环
6、continue break
7、命名规范以及语法格式

一、循环

1、循环的目的

可以重复执行某些代码

2、JS中的循环

· for循环
· while循环
· do…while循环

二、for循环

在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句。

2.1语法结构

for循环主要用干把其些代码循环若干次,通常跟计数有关系,其语法结构如下:
在这里插入图片描述
初始化变量:就是用var 声明的一个普通变量,通常用于作为计数器使用
条件表达式:就是用来决定每一次循环是否继续执行 就是终止的条件
操作表达式:是每次循环最后执行的代码经常用于我们计数器变量进行更新(递增或者递减)

for (var i = 1; i <= 100; i++){
	console.log('你好吗');
}

断点调试
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
断点调试可以帮我们观察程序的运行过程。
浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点
Watch:监视,通过watch可以监视变量的值的变化,非常的常用。
F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。
今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。

2.2 for循环重复相同的代码

在这里插入图片描述

2.3 for循环重复不同的代码

在这里插入图片描述在这里插入图片描述
**案例1 **:一行打印五个星星
我们采取追加字符串的方式,这样可以打印到控制台上。
在这里插入图片描述

三、双重for循环

很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形、打印一个倒
直角三角形等,此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个 for循环,这样的for循环语句我们称之为双重for循环。

3.1 语法结构

在这里插入图片描述

· 注意
1.我们可以把里面的循环看做是外层循环的语句
2.外层循环循环一次,里面的循环执行全部

3.2 案例

案例1: 打印五行五列星星
在这里插入图片描述
核心:
内层循环负责一行打印五个星星
外层循环负责打印五行
在这里插入图片描述
案例2: 打印n行n列星星
在这里插入图片描述
案例3: 打印倒三角案例
在这里插入图片描述
案例4: 打印九九乘法表
思想:
①共有9行,但是每行的个数不-样,因此需要用到双重for循环
②外层的for循环控制行数i ,循环9次, 可以打印9行
③内层的for循环控制每行公式j
④核心算法:每一行公式的个数正好和行数一致,j<= i;
在这里插入图片描述

3.3 for循环小结

· for循环可以重复执行某些相同代码
· for循环可以重复执行些许不同的代码,因为我们有计数器
· for循环可以重复执行某些操作,比如算术运算符加法操作
· 随着需求增加,双重for循环可以做更多、更好看的效果
· 双重for循环,外层循环一次,内层for循环全部执行
· for循环是循环条件和数字直接相关的循环
· 分析要比写代码更重要
· 一些核心算法想不到,但是要学会,分析它的执行过程
· 举一反三,自己经常总结,做一些相似的案例

四、while循环

4.1 语法结构

while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。
while语句的语法结构如下:
在这里插入图片描述
执行思路:
1、先执行条件表达式,如果结果为true,则执行循环体代码;如果为false,则退出循环,执行后面代码
2、执行循环体代码
3、循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束

五、do while循环

5.1 do while循环

do.….while语句其实是while语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
do….while语句的语法结构如下:
请添加图片描述
执行思路:
1、先执行一次循环体代码
2、再执行条件表达式,如果结果为true,则继续执行循环体代码,如果为false,则退出循环,继续执行后面
代码
注意:先再执行循环体,再判断,我们会发现 do.…while 循环语句至少会执行一次循环体代码

5.2 循环小结

· JS中循环有for、whiledowhile
· 三个循环很多情况下都可以相互替代使用
· 如果是用来计次数,跟数字相关的,三者使用基本相同,但是我们更喜欢用for
· while和do…while可以做更复杂的判断条件,比for循环灵活一些
· while和do…while执行顺序不一样,while先判断后执行,do…while先执行一次,再判断执行
· while和do…while执行次数不一样,do…while至少会执行一次循环体,而while可能一次也不执行
· 实际工作中,我们更常用for循环语句,它写法更简洁直观,所以这个要重点学习

六、continue break

6.1 continue

continue关键字同于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。
在这里插入图片描述

6.2 break

break关键字用于立即跳出整个循环。
在这里插入图片描述

七、命名规范以及语法格式

1、标识符命名规范

· 变量、函数的命名必须要有意义
· 变量的名称一般用名词
· 函数的名称一般用动词

2、操作符规范

在这里插入图片描述

3、单行注释规范

在这里插入图片描述

4、其他规范

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/560779.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习 - 决策树

决策树是一种流程图&#xff0c;可以帮助我们根据以前的经验进行决策 比如&#xff0c;一个人将尝试决定他/她是否应该参加喜剧节目 下面是要用到的数据集 AgeExperienceRankNationalityGo36109UKNO42124USANO2346NNO5244USANO43218USAYES 读取并打印数据集 import pandas…

Transformer、Bert、Gpt对比系列,超详细介绍transformer的原理,bert和gpt的区别

一、Transformer架构图 Transformer 是一种用于序列到序列学习的神经网络模型&#xff0c;主要用于自然语言处理任务&#xff0c;如机器翻译、文本摘要等。它在2017年由 Google 提出&#xff0c;采用了注意力机制来对输入序列进行编码和解码。 Transformer 模型由编码器和解码…

随身WIFI折腾日记(五)---远程视频监控

六、远程视频监控 为了实现基于随身WIFI的网络摄像头&#xff0c;我参考了如下视频课程&#xff1a; 韦东山老师手把手带你从0开始自己做一个视频监控项目 系统由三部分组成&#xff1a;推流端(随身WIFI)、流媒体服务器(云服务器)、拉流端(浏览器/VLC播放器) 方案&#xff1…

NetworkInterface类

文章目录 1. 简介2. 工厂方法3. 获取方法 1. 简介 NetworkInterface类表示一个本地IP地址。这可以是一个物理接口&#xff0c;如额外的以太网卡&#xff08;常见于防火墙和路由器&#xff09;&#xff0c;也可以是一个虚拟接口&#xff0c;与机器的其它IP地址绑定到同个物理硬…

ensp实践dhcp服务

ensp实践dhcp服务 1、dhcp接口分配模式2、dhcp接口地址池分配模式3、dhcp布拉布拉布拉 1、dhcp接口分配模式 1.1、路由器AR1配置dhcp动态获取 <Huawei>system-view [Huawei]interface g0/0/0 [Huawei-GigabitEthernet0/0/0]ip address 10.1.1.1 24 [Huawei-GigabitEthe…

PixiJS 源码解读:绘制矩形,底层都做了什么?

大家好&#xff0c;我是前端西瓜哥&#xff0c;今天带大家看一下 PixiJS 的源码实现。 PixiJS 是一个非常流行的 Canvas 库&#xff0c;start 数将近 4w。 使用 PixiJS 简单易用的 API&#xff0c;我们可以在浏览器页面的 Canvas 元素上高性能地绘制图形&#xff0c;实现流畅…

基于深度学习的交通标志检测和识别(从原理到环境配置/代码运行)

项目是一个基于Python和OpenCV的交通标志检测和识别项目,旨在使用计算机视觉和深度学习技术对交通标志进行检测和分类。本文将从介绍项目原理和框架开始,详细介绍该项目的实现过程和技术细节,最后给出项目的安装和使用方法。 前后结果对比 识别前 识别后 一、 项目原理和框…

随身WIFI折腾日记(一)---霓虹灯

引言 通过对高通410芯片的随身WIFI刷写Debain系统&#xff0c;我们已经拥有了一台带4G功能的迷你ARM64单板电脑。现在我们可以基于此此平台进行一下二次开发。 随身WIFI的优势就是价格低廉&#xff0c;性能和树莓派zero2、树莓派3b差不多。 硬件配置如下&#xff1a; msm89…

随身WIFI折腾日记(二)---文件传输和软件安装

二、文件传输 我们可以通过SCP和SFTP工具和随身WIFI(USB连接)进行数据传输&#xff0c;上图以scp工具为例。 将本地电脑文件传输至随身WIFI&#xff0c;本地电脑上输入如下指令即可&#xff1a; scp /path/to/local/file user192.168.68.1:/path/to/remote/directory/注意&…

RK3568平台开发系列讲解(驱动基础篇)10min带你获取、了解与编译Kernel源代码

🚀返回专栏总目录 文章目录 一、Kernel获取二、Kernel根目录2.1 Documentation/2.1 arch/2.2 block/2.3 boot.its2.4 drivers/2.5 firmware/2.6 fs/2.7 include/2.8 init/2.9 ipc/2.10 kernel/2.11 lib/2.12 lo

(转载)从0开始学matlab(第13天)—画图进阶

我们将讨论简单的二维图象(之前已有所介绍)的附加特性。这些特性将允许我们控制 x&#xff0c;y 轴上的值的范围&#xff0c;在一个坐标系内打印多个图象&#xff0c;或创建多个图&#xff0c;或在一个图象窗口内创建多个子图像&#xff0c;或提供更加强大的轨迹文本字符控制。…

【c语言】全部知识点总结

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ …

前端如何做单元测试? 看这篇就入门了

前言 对于现在的前端工程&#xff0c;一个标准完整的项目&#xff0c;通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够&#xff0c;因此我写了这边文章&#xff0c;一方面期望通过这篇文章…

基于DDSRF正负序分离方法的不平衡电网PQ控制策略_平衡电流控制

0.前言 对于并网逆变器而言&#xff0c;电网会存在不平衡的情况。在这种情况下&#xff0c;不平衡的电网电压可以分解成为正序、负序和零序分量。并网逆变器通常期望能够实现单位功率因数并网&#xff0c;向电网注入对称的正弦电流&#xff0c;所以此时的微电网逆变器控制策略显…

DC-9靶机-简单谈一下端口敲门技术 (Port Knocking)

前言 在打靶机DC-9时&#xff0c;爆破SSH时一直显示失败&#xff0c;经过查阅才知道原来是对端口做了“隐藏”&#xff0c;需要通过 Port Knocking 来主动开启&#xff0c;由于平时接触到的机会不多&#xff0c;所以这里简单记录一下&#xff0c;加强一下印象&#xff0c;也希…

Systrace系列7 —— Vsync 解读

本文主要是是介绍 Android 中的 Vsync 机制。文章会从 Systrace 的角度来看 Android 系统如何基于 Vsync 每一帧的展示。Vsync 是 Systrace 中一个非常关键的机制,虽然我们在操作手机的时候看不见,摸不着,但是在 Systrace 中我们可以看到,Android 系统在 Vsync 信号的指引下…

Tomcat系统架构浅析

大家好&#xff0c;我是易安&#xff01; 今天咱们就来一步一步分析Tomcat的设计思路&#xff0c;看看Tomcat的设计者们是如何设计一个复杂系统&#xff0c;怎么设计顶层模块&#xff0c;以及模块之间的关系。 Tomcat总体架构 我们知道如果要设计一个系统&#xff0c;首先是要…

特征缩放(Scale Features)、特征缩放预测​CO2 值、df列索引扩展

目录 1、特征缩放 2、预测CO2 值 3、df列索引扩展 1、特征缩放 特征缩放可以用于不同的度量单位。度量单位不同的情况下&#xff0c;特征的数值大小也会有所不同&#xff0c;这可能会影响到某些机器学习算法的表现。例如&#xff0c;如果一个特征的单位是英寸&#xff0c;而另…

DAB-DETR代码学习笔记

先上一张整体架构图 &#xff1a; 代码地址&#xff1a;GitHub - IDEA-Research/DAB-DETR: [ICLR 2022] DAB-DETR: Dynamic Anchor Boxes are Better Queries for DETR 论文地址&#xff1a; https://arxiv.org/pdf/2201.12329.pdf 文章全名《DYNAMIC ANCHOR BOXES ARE BETTER …

建模杂谈系列223 Q-Learning示例的代码拆解分析

说明 找到了一个合适的例子&#xff0c;然后我对其中的内容进行了拆解分析。我觉得代码表达的内容比伪代码清晰多了。 这次算是补砖了(监督无监督强化)&#xff0c;过去实际上接触过很多强化体系内的基本工具&#xff0c;但一直没有开始做&#xff0c;部分原因是没时间&#…