零基础入门前端--JavaScript 循环结构语句

news2025/1/12 21:45:36

循环控制

控制程序重复执行若干次相同或似的逻辑,理解并正确使用循环控制,需要搞清楚循环的3个要素:起始值、变化量、终止条件。

起始值循环的起点,可以是【任意数据类型值】

变化量是指【改变起始值的方式】

终止条件【布尔类型值】,它是循环停止的边界

while 循环

while,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了

语法 :

1. while (条件) { 满足条件就执行 }

因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了

// 1. 初始值(初始化条件)
var num = 0; // 
2. 终止条件 while (num < 10) { 
              // 3. 要执行的代码 console.log('当前的 num 的值是 ' + num)
              // 4. 变化量 num = num + 1 
}

案例1: 输出1 ~100之间的所有偶数

// 起始条件 
var n = 1 
    // 终止条件 
while (n <= 100) { 
    // 逻辑代码 if (n % 2 === 0) { 
                  console.log(n);
               } 
               // 变化量 
               n++ 
}

案例2: 求 1 ~ 100 以内所有 3 的倍数的和

// 求 1 ~ 100 以内所有 3 的倍数的和 

// 声明一个变量用于接收和 
var sum = 0 
// 初始值 
var num = 1 
    // 终止条件 
while (num <= 100) { 
   if (num % 3 === 0) { 
       sum += num 
   } 
   // 变化量 
   num++ 
} 
console.log(sum);

案例3: 求三次自幂数(水仙花数)

自幂数是指一个三位数,它的每个位上的数字的三次幂之和等于它本身

例如 : 153

○三个位上分别是 1 和 5 和 3

○三次幂只和就是 1的三次方 + 5的三次方 + 3的三次方

○结果是 153 和原始数字一样

○153 就是一个三次自幂数

// 求三次自幂数 
// 初始值 
var m = 100 
// 终止条件 
while (m <= 999) { 
   // 获取百位数 
   var a = parseInt(m / 100) 
   // 获取10位数 
   var b = parseInt(m % 100 / 10) 
   // 获取个位数 var c = m % 10 
   // 求个十百三位数的3次幂的和 
   var res = a ** 3 + b ** 3 + c ** 3 
   if (res === m) { 
       console.log(m + '是三次自幂数'); 
   } 
   // 变化量 
   m++ 
}

do while 循环

是一个和 while 循环类似的循环,while 会先进行条件判断,满足就执行,不满足直接就不执行了

但是 do while 循环是,先不管条件,先执行一回,然后在开始进行条件判断

语法:

do { 要执行的代码 } while (条件)

// 定义一个变量 
var n = 1 
// 设定我们的循环条件,n要小于等于3 
while (n <= 3) { 
   console.log('我执行了' + n + '次'); 
   // 这里我们要让我们的变量向着我们设定的值前进 
   n = n + 1

do while 和 while 循环的区别

/* 
while 循环和do while循环的区别 
    => 通过对比我们发现,do while循环不管条件是不是满足都会执行一次 
    => while 循环在条件不满足的情况下一次都不执行 
    => 因为while是先判断条件后执行代码,如果条件不满足就一次也不执行了 
    => 也就说 在条件都满足的情况下 while循环和do while循环是一样的 
    => 在条件不满足的情况的下do while循环要比while循环多执行一次 
       -> 因为do while循环是先执行后判断 
       -> while 循环是先判断后执行 
*/ 
// do while 循环 
// 定义一个其实变量 
var n = 10 
do { 
   console.log('我执行了一次'); 
   n++ 
} while (n <= 3) 
// while循环 
while (n <= 3) { 
    console.log('我执行了一次'); 
    n++ 
}

案例1: 求 1 ~ 100 以内所有整数的和

// 定义我们的初始值 
var num = 1 
// 我们要求和,需要需要定义一个变量接收我们最后的结果 
var sum = 0 
do { 
    // 计算我们的结果 
    sum += num 
    // 让我们的初始值执行++操作 
    num++ 
} while (num <= 100) // 设定我们的结束条件 
// 打印一下我们的结果 
console.log(sum);

for 循环

和 while 和 do while 循环都不太一样的一种循环结构,道理是和其他两种一样的,都是循环执行代码的

语法:

for (初始值; 结束条件; 变化量) { 要执行的代码 }
for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始值,终止条件,变化量,写在了一起 
for (var i = 1; i <= 10; i++) { 
    // 这里写的是要执行的代码 
    console.log(i) 
} 
// 控制台会依次输出 1 ~ 10

案例1: 求 1 ~ 100 以内所有 3 的倍数的和

// 求 1 ~ 100 以内所有 3 的倍数的 和 
// 声明一个变量用于接收和 
var sum = 0 // i = 1 初始值 
// i <= 100 终止条件 
// i++ 变化量 
for (var i = 1; i <= 100; i++) { 
    if (i % 3 === 0) { 
        sum += i 
    }
}

案例2: 求1000 ~ 2000 之间所有的闰年

// 求1000 ~ 2000 之间所有的闰年 
// 公历闰年的简单计算方法 1.能被4整除而不能被100整除。2.能被400整除。 
// 开始循环 
for (var i = 1000; i <= 2000; i = i + 4) { 
    //判断是不是闰年 
    if (i % 4 === 0 && i % 100 !== 0 || i % 400 === 0) { 
        console.log(i + '是闰年'); 
     }
}

案例3: 求两个数字的最大公约数

// 求两个数字的最大公约数 
// 公约数:能同时被两个数整除的数就是公约数 
// 声明两个数 
var min = 12 
var max = 30 
// 定一个变量用于接收公约数 
var res = 1 // 公约数最小是1 
for (var i = 1; i <= min; i++) { // 终止条件是最小的那个数字 
    if (min % i === 0 && max % i === 0) { 
        console.log(i); 
    } 
}

循环控制语句

break 终止循环

在循环没有进行完毕的时候,因为我设置的条件已满足,提前终止整个循环,不会再有下一次循环

比如: 我要吃五个包子,吃到三个的时候,不能在吃了,我就停止吃包子这个事情,要终止循环,就可以直接使用 break 关键字

for (var i = 1; i <= 5; i++) { 
    // 每循环一次,吃一个包子 
    console.log('我吃了一个包子') 
    // 当 i 的值为 3 的时候,条件为 true,执行 {} 里面的代码终止循环 
    // 循环就不会继续向下执行了,也就没有 4 和 5 了 
    if (i === 3) { 
        break 
     }
 }
 

continue 结束本次循环

在循环中,把循环的本次跳过去,继续执行后续的循环,也就是结束本次循环,直接进入下次循环

比如: 吃五个包子,到第三个的时候,第三个掉地下了,不吃了。跳过第三个,继续吃第四个和第五个。跳过循环的本次,就可以使用 continue 关键字

for (var i = 1; i <= 5; i++) { 
     // 当 i 的值为 3 的时候,执行 {} 里面的代码 
     // {} 里面有 continue,那么本次循环后面的代码就都不执行了 
     // 自动算作 i 为 3 的这一次结束了,去继续执行 i = 4 的那次循环了 
     if (i === 3) { 
         console.log('这个是第三女朋友') 
         continue 
         } console.log('我的女朋友') 
}

案例1: 求最大公约数

// 最大公约数 
// 找最大的xxx数字, 从大向小循环最好 
var res = 1 
// 声明两个变量 
var min = 12 
var max = 24 

// 开始循环, 从大向小循环 
for (var i = min; i >= 1; i--) { 
     // 判断是否是公约数 
     if (min % i === 0 && max % i === 0) { 
         // 把i的值赋值给 res 
         res = i 
         // 只要找到一个公约数, 就肯定是最大公约数。可以直接结束循环了 
         break 
      } 
} 
// 循环结束 
console.log(min + ' 和 ' + max + ' 的最大公约数是 : ' + res)

案例2: 最小公倍数

// 最小公倍数 
// 因为是找 最小xxx的数字, 所以从小向大循环最好 
var res = 0 
var min = 10 
var max = 15 

// 从小到大循环 
for (var i = max; i <= min * max; i += max) { 
     // 只要判断还是 min 的倍数 
     if (i % min === 0) { 
     console.log('公倍数是 : ' + i) 
     // 给 res 赋值 
     res = i 
     // 找到的第一个公倍数就是最小公倍数 
     // 直接结束循环了 
     break 
     } 
}

循环嵌套

利用循环的知识来对比一个简单的天文知识,我们知道地球在自转的同时也在围绕太阳公转,如果把自转和公转都看成是循环的话,就相当于是循环中又嵌套了另一个循环。

image.png

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套,如下代码所示:

for (var i = 1; i <= 3; i++) { 
     // 在一个循环内, 再次书写一个循环 
     for (var j = 1; j <= 3; j++) { 
         console.log('i 是 ' + i + ' , j 是 ' + j) 
         } 
}

外层的循环每执行1次,内部循环执行 3 次,然后外层重复下一次循环…

注意:外层循环和内层循环不能使用同一个变量

案例1: 在页面上使用 (☆) 出现一个正方形

// 分析: 
// 出现一个☆ 
// document.write('☆') 
// 要出现9个,是不是要执行同样的代码9次,是不是可以用到循环 
// for (var i = 0; i <= 9; i++) { 
// document.write('☆ ') // } 

// 控制行数 
for (var j = 1; j <= 9; j++) { 
     // 控制列数 
     for (var i = 1; i <= 9; i++) { 
          document.write('☆ ') 
     } 
     // 为了出现正方形需要换行 document.write('</br>') 
}

案例2: 在页面上使用 (☆) 出现一个三角形

// 控制行数 
for (var j = 1; j <= 9; j++) { 
     // 控制列数 
     for (var i = 1; i <= j; i++) { 
          document.write('☆ ') 
     } 
     // 为了出现正方形需要换行 
     document.write('</br>') 
}

案例3: 在页面上使用 (☆) 出现一个倒三角形

// 控制行数 
for (var j = 1; j <= 9; j++) { 
     // 控制列数 
     for (var i = j; i <= 9; i++) { 
         document.write('☆ ') 
     } 
     // 为了出现正方形需要换行 
     document.write('</br>') 
}

案例4: 页面上打印出九九乘法表

// 控制行数 
for (var j = 1; j <= 9; j++) { 
    // 控制列数 
    for (var i = 1; i <= j; i++) { 
        document.write(i + '*' + j + '=' + j * i) 
    } 
    // 为了出现正方形需要换行 
    document.write('</br>') 
}

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

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

相关文章

深度学习算法及卷积神经网络

目录标题 传统神经网络矩阵计算&#xff1a;正则化&#xff1a;激活函数sigmoid损失函数前向传播激活函数Relu数据预处理DROP-OUT 卷积神经网络(CNN)1.CNN网络的构成2. 卷积层2.1 卷积的计算⽅法2.2 padding2.3 stride2.4 多通道卷积2.5 多卷积核卷积2..6 特征图大小 3. 池化层…

无法打开“fsevents.node

在Mac 打开vue项目的时候「c c」出现这个&#xff0c;可能是一个项目多个ide打开&#xff0c; 如何解决呢&#xff1f; 图1 把 node_modules 文件夹删了&#xff0c;在编译一把。也就是 npm install npm install

配置中心Disconf、SpringCloudConfig、Apollo、Nacos比较

Config Server Center 1、Disconf 1、1简介 2014年7月百度开源的配置管理中心&#xff0c;同样具备配置的管理能力&#xff0c;不过目前已经不维护了&#xff0c;最近的一次提交是两年前了。 2、SpringCloudConfig 2-1、简介 2014年9月开源&#xff0c;Spring Cloud 生态…

技术选型|日志采集和管理工具您都了解哪些,看这篇就够了

简介 对于日志管理当前网络上提供了大量的日志工具&#xff0c;今天就给大家分析总结一下这些常用工具的特点&#xff0c;希望对你们在选型时有所帮助&#xff0c;如果有用记得一键三连。 1、Filebeat Filebeat是用于转发和集中日志数据的轻量级传送程序。作为服务器上的代理…

2_STM32最小系统设计

MCU最小系统&#xff1a;一个MCU在正常工作中&#xff0c;正常下载程序前提下的最简电路。 最简电路包含&#xff1a; 供电电路、复位电路、时钟电路(高速时钟、低速时钟)&#xff1a;2个外部晶振、Boot启动模式选择(跳线帽)、下载电路(uart/JTAG/SWD)、后备电池VBAT(维持后备区…

使用vscode+cmake进行c++代码编写

1. 前言 因为vcode的主题格式比visual studio好看&#xff0c;而且注释使用ctr/注释非常方便。所以对于一下小型的c代码测试&#xff0c;例如用不到外部库&#xff0c;只需要纯c自己语法&#xff0c;我就想和python一样&#xff0c;在vscode上写。因此记录一下比较简单的典型的…

SAP ABAP 使用SICF发布HTTP API接口

一、SE24创建类&#xff1a;Z_HCX_HTTP 1、创建类&#xff1a; 2、切换到接口&#xff08;interface&#xff09;页签&#xff0c;输入IF_HTTP_EXTENSION &#xff0c;回车。切换到方法&#xff08;method&#xff09;页签&#xff0c;双击IF_HTTP_EXTENSION~HANDLE_REQUEST进…

Linux学习记录——십구 进程间通信(1) 管道

文章目录 1、进程间通信介绍1、目的2、发展 2、管道1、原理2、简单模拟实现3、总结 3、匿名管道——控制进程4、命名管道1、原理2、模拟实现 1、进程间通信介绍 之前所学都是单个进程&#xff0c;多个进程之间如何运转&#xff1f; 1、目的 数据传输&#xff1a;一个进程需要…

Linux下SOCKET编程

一、SOCKET编程 1、socket()函数 int socket(int protofamily, int type, int protocol);//返回sockfd返回值sockfd是描述符。 socket函数对应于普通文件的打开操作。普通文件的打开操作返回一个文件描述字&#xff0c;而socket()用于创建一个socket描述符&#xff08;socke…

2. C++使用Thread线程参数传递问题

1. 说明 在子线程函数中进行参数传递&#xff0c;实际上是Thread类的构造函数对传递的参数进行了拷贝&#xff0c;拷贝到线程独立的内存中&#xff0c;及时参数是引用的形式&#xff0c;也可以在新线程中进行访问&#xff0c;如果参数传递时的类型不一致&#xff0c;在线程的上…

Servlet(二)

目录 1.Cookie 和 Session 1.1HttpServletRequest 类中的相关方法 1.HttpSession getSession() 2.Cookie[] getCookies() 1.2HttpServletResponse 类中的相关方法 1.void addCookie(Cookie cookie) 1.3HttpSession 类中的相关方法 1.4Cookie 类中的相关方法 1.5网页登录…

详解Spring Security

目录 1.概述 2.登录 2.1.默认用户 2.2.自定义用户 2.3.加密 2.4.绕过加密 2.5.怎么传递用户信息 2.6.记住我 3.登出 4.使用数据库 4.1.jdbcAuthentication 4.2.userDetailsService 5.自定义处理器 6.更多细粒度的控制 7.原理简述 1.概述 Spring Security是一个…

使用 Kubernetes 运行 non-root .NET 容器

翻译自 Richard Lander 的博客 Rootless 或 non-root Linux 容器一直是 .NET 容器团队最需要的功能。我们最近宣布了所有 .NET 8 容器镜像都可以通过一行代码配置为 non-root 用户。今天的文章将介绍如何使用 Kubernetes 处理 non-root 托管。 您可以尝试使用我们的 non-root…

gateway报 netty堆外内存溢出问题解决io.netty.util.internal.OutOfDirectMemoryError

昨天线上网关突然无法访问。打开日志看到错误信息“io.netty.util.internal.OutOfDirectMemoryError” 堆外内存溢出。。这也没碰到过啊&#xff0c;看来今天准点下班的愿望又落空了。老规矩面向百度编程。先看看网上有没有其他兄弟碰到这个问题。一顿搜索之后发现&#xff0c;…

已解决windows pycocotools安装失败问题 —— 超简单

作者主页&#xff1a;爱笑的男孩。的博客_CSDN博客-深度学习,YOLO,活动领域博主爱笑的男孩。擅长深度学习,YOLO,活动,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typecollect个人…

分库分表与分布式主键生成策略详解--一个无数人踩过却一直被人忽视的深坑

文章目录 一、从分库分表的一个神坑说起二、分布式主键要考虑哪些问题&#xff1f;三、主要的主键生成策略1、数据库策略2、应用单独生成3、第三方服务统一生成4、与第三方结合的segment策略 四、定制雪花算法1、如影随形的时钟回拨问题2、用主键生成策略优化分配工作进程位3、…

萤石“小步快走”,跨进智能家居生态圈

文丨智能相对论 作者丨Kinki 近日&#xff0c;萤石网络&#xff08;下称“萤石”&#xff09;举办了2023春季新品发布会&#xff0c;这是公司上市以来的首个新品发布会&#xff0c;除了拳头产品智能家居摄像机之外&#xff0c;还有智能入户产品、TV Studio等十多款新品&#…

NC65 集团业务参数 GLS01参数值的默认值作用是什么?

NC65 集团业务参数 GLS01参数值的默认值作用是什么&#xff1f; 用在总账系统的所有账簿。如果设置的期间个数大于12&#xff0c;还得要求所查询的账表支持跨年查询&#xff0c;比如科目余额表&#xff0c;不支持跨年&#xff08;注意&#xff1a;这里说的不支持跨年是指余额为…

4.2.1朴素模式匹配算法

什么是字符串的模式匹配&#xff1a; 从这段字符串里面搜索内容&#xff0c;被搜索的字符串我们称之为主串。 也可能匹配不到 主串长度为n&#xff0c;模式串长度为m。 朴素模式匹配算法&#xff1a;将主串中所有长度为m的字串依次与模式串对比&#xff0c;直到找到一个完全匹…

【JavaEE】File、InputStream和OutputStream的使用

1.File 在计算机中目录结构如下&#xff1a; 而File就表示一个目录或者一个普通文件。 File表示目录&#xff1a; File表示普通文件&#xff1a; 我们先来看File的构造方法&#xff1a; 构造器描述File(File parent, String child)根据父目录 孩子文件路径&#xff0c;创…