JavaScript流程控制-循环(循环(for 循环,双重 for 循环,while 循环,do while 循环,continue break))

news2025/7/8 0:00:13

目录

JavaScript流程控制-循环

循环

for 循环

执行过程:

断点调试:

案例一:求1-100之间所有整数的累加和

案例二:求1-100之间所有数的平均值

案例三:求1-100之间所有偶数和奇数的和

案例四:求1-100之间所有能被3整除的数字的和

案例五:求学生成绩

案例六:一行打印五个星星

双重 for 循环

双重 for 循环概述

while 循环

执行思路:

do while 循环

执行思路:

continue break

continue 关键字

break 关键字


JavaScript流程控制-循环

循环

在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句

在Js 中,主要有三种类型的循环语句:

for 循环

while 循环

do...while 循环

for 循环

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

语法结构

for 循环主要用于把某些代码循环若干次,通常跟计数有关系。其语法结构如下:

for(初始化变量; 条件表达式; 操作表达式 ){
 //循环体
}

初始化变量:通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。

条件表达式:用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。

操作表达式:每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然,递减变量也是可以的。

执行过程:

1. 初始化变量,初始化操作在整个 for 循环只会执行一次

2. 执行条件表达式,如果为true,则执行循环体语句,否则退出循环,循环结束。

3. 执行操作表达式,此时第一轮结束。

4. 第二轮开始,直接去执行条件表达式(不再初始化变量),如果为 true ,则去执行循环体语句,否则退出循环。

5. 继续执行操作表达式,第二轮结束。

6. 后续跟第二轮一致,直至条件表达式为假,结束整个 for 循环。

断点调试:

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试 过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

断点调试可以帮我们观察程序的运行过程

浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点

Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。

F11: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。

在sources可以找到网页源文件代码,然后可以打断点后刷新网页,就可以一步一步调试,可以按按钮也可以快捷键F11下一步,通过在watch添加变量的名字可以看到变量当前的值

案例一:求1-100之间所有整数的累加和

<!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>Document</title>
    <script>
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        alert('1-100的和为' + sum);
    </script>
</head>
<body>
    
</body>
</html>

案例二:求1-100之间所有数的平均值

<!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>Document</title>
    <script>
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        alert('1-100的和为' + sum / 100);
    </script>
</head>
<body>
    
</body>
</html>

案例三:求1-100之间所有偶数和奇数的和

<!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>Document</title>
    <script>
        var sum1 = 0, sum2 = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0)sum1 += i;
            else sum2 += i;
        }
        alert('1-100的偶数和为' + sum1 + '\n1-100的奇数数和为' + sum2);
        alert();
    </script>
</head>
<body>
    
</body>
</html>

案例四:求1-100之间所有能被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>Document</title>
    <script>
        var sum1 = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0)sum1 += i;
        }
        alert('1-100的能被3整除的数的和为' + sum1);
        alert();
    </script>
</head>
<body>
    
</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>Document</title>
    <script>
        var people = parseFloat(prompt('请输入人数'));
        var sum1 = 0;
        for (var i = 1; i <= people; i++){
            var results = parseFloa(prompt('请输入第' + i + '位同学的成绩'));
            sum1 += results;
        }
        alert('班级总共' + people + '人\n总成绩为:' + sum1 + '\n平均成绩为:' + sum1 / people);
    </script>
</head>
<body>
    
</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>Document</title>
    <script>
        var s = '';
        for (var i = 1; i <= 5; i++){
            s += '*';
        }
        alert(s);
    </script>
</head>
<body>
    
</body>
</html>

双重 for 循环

双重 for 循环概述

很多情况下,单层 for 循环并不能满足我们的需求,比如我们要打印一个 5 行 5 列的图形、打印一个倒直角三角形等,此时就可以通过循环嵌套来实现。

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个 for 循环,这样的 for 循环语句我们称之为双重for循环。

while 循环

while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。

while语句的语法结构如下:

while (条件表达式) {
 // 循环体代码
}

执行思路:

① 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码

② 执行循环体代码

③ 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循 环条件为 false 时,整个循环过程才会结束

do while 循环

do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如 果条件为真,就会重复执行循环体,否则退出循环。

do... while 语句的语法结构如下:

do {
 // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路:

① 先执行一次循环体代码

② 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面 代码

注意:先再执行循环体,再判断,我们会发现 do…while 循环语句至少会执行一次循环体代码

continue break

continue 关键字

continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行 一次)。

break 关键字

break 关键字用于立即跳出整个循环(循环结束)

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

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

相关文章

哈希(Hash) - 开散列/闭散列

文章目录&#xff1a;认识哈希哈希函数处理冲突的方法闭散列&#xff08;开放定址法&#xff09;开散列&#xff08;链地址法&#xff09;哈希表闭散列实现闭散列基本框架哈希表闭散列插入&#xff08;insert&#xff09;哈希表闭散列删除&#xff08;erase&#xff09;哈希表闭…

深度学习模型部署全流程-模型部署

往期回顾&#xff1a;模型训练 文章目录前言模型部署全流程1.推理框架2.onnx模型3.模型转换4.代码实现5.完整代码小结前言 在上一篇文章中详细讲述了模型训练的流程&#xff0c;这篇文章主要介绍模型部署的流程。模型部署通常指通过C/C语言能够把python框架训练好的模型跑起来…

【ROS】机械人开发一--树莓派安装ubuntu18.04

前言&#xff1a;安装了一天的树莓派系统&#xff0c;遇到了很多坑&#xff0c;这里将教程详细分享一下&#xff0c;方便大家快速的安装系统。 目录一、操作环境硬件软件二、资源下载链接三、具体步骤烧入修改镜像文件问题修改重启时间PC端使用xshell远程连接修改软件源安装ubu…

嵌入式软件调试(Debug)方法

嵌入式软件调试&#xff08;Debug&#xff09;方法1 问题定位和分析方法1.1 二分定位法1.2 数据流方法1.3 隔离法1.4 汇编法1.5 ABA法1.6 版本回溯确认法1.7 调试IO法2 调试注意事项3 典型问题类型1 问题定位和分析方法 1.1 二分定位法 方法阐述&#xff1a; 在任务中或者可能…

Redis介绍与下载

初识Redis Redis介绍 由Salvatore Sanfilippo写的key-value存储系统&#xff0c;是跨平台的非关系型数据库 Redis通常被称之为数据结构服务器&#xff0c;因为值(value)可以是字符串、哈希、列表、集合和有序集合等类型 Redis是完全开源的遵守BSD协议&#xff0c;是一个高性能的…

看着别人月入过万,30岁想转入做软件测试,有什么难度?

我见过很多30岁转行软件测试成功的&#xff0c;也见过软件测试转行失败的。 说实话&#xff0c;30岁转行需要付出比一般人更加多的努力。 并且每一步的路都不能走偏。 30岁了&#xff0c;转行肯定不像才毕业的小年轻那么容易&#xff0c;毕竟你转行要跟社会上已经从事过几年的…

Android移动应用开发之使用room实现数据库的增删改查

文章目录前言核心代码前言 我们直接开门见山&#xff0c;展示一下效果&#xff1a; 数据库的插入和查询&#xff1a; 数据库的修改和查询&#xff1a; 可以看到id为23的数据发生了修改。 删除一条数据&#xff1a; 可以看到id为23的数据被删除了 删除全部数据&#xff1…

Sedex验厂有证书吗?

【Sedex验厂有证书吗&#xff1f;】 SEDEX 是一个全球性的会员制组织&#xff0c;旨在帮助企业在负责任商业中去繁存简&#xff0c;携手共进。买家、供应商和审计员可以在平台上快速轻松地储存、共享和报告信息。 SMETA&#xff08;Sedex Members Ethical Trade Audit&#xff…

日本知名汽车零部件公司巡礼系列之株式会社111

株式会社111 业务内容&#xff1a; . 在所有领域的零件缴纳各种都有相应的实际业绩 &#xff08;例&#xff09;OA器械、光学器械、汽车其他运送器械、医疗器械、各种制造装置零件、机器人相关零件、能源相关零件、航空相关零件等 广泛应对各种材料产品 铁、铝、不锈钢、合…

【FLASH存储器系列八】ONFI数据接口详述之一

目录 1.1 数据接口类型概览 1.2 信号功能分配 1.3 接口模式切换 1.1 数据接口类型概览 ONFI目前支持5中不同的数据接口类型&#xff1a;SDR&#xff0c;NV-DDR&#xff0c;NV-DDR2、NV-DDR3和NV-LPDDR4。SDR是传统的NAND接口&#xff0c;使用RE_n锁存读数据&#xff0c;WE_n锁…

MSP430F5529库函数——模数转换模块(ADC12)软件触发

需提前观看&#xff1a;MSP430F5529库函数学习——串口 目录 代码 ADC初始化部分 引脚复位 ADC12_A_init&#xff08;&#xff09; 函数声明 baseAddress sampleHoldSignalSourceSelect clockSourceSelec clockSourceDivider ADC12_A_enable&#xff08;&#xff09;…

有关javascript中事件对象e

一、简单认识e 事件对象e&#xff0c;是event的简称。当一个事件被触发时候&#xff0c;这个事件的有关数据都会被存储在一个事件对象e里面&#xff0c;这个对象e有许多固定方法提供给我们查看里面各种数据。 二、关于e对象的常用属性介绍 1. e.eventPhase查看事件触发所处的阶…

MySQL索引原理笔记

注意&#xff1a;本博客为个人学习记录&#xff0c;不保证正确性&#xff0c;仅供参考指正 MySQL索引原理以及SQL优化 文章目录MySQL索引原理以及SQL优化索引与约束覆盖索引最左匹配规则索引下推&#xff08;面试重点&#xff09;索引存储索引失效如何解决sql比较慢的问题索引…

【JavaWeb】JSP(172-190)

172.Jsp-什么是jsp&#xff0c;以及它有什么作用 jsp 的全换是 java server pages。Java 的服务器页面。 jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据。 因为 Servlet 程序回传 html 页面数据是一件非常繁锁的事情。开发成本和维护成本都极高。 Servlet 回传 htm…

大白话讲解MySQL 索引,页分裂,行溢出,事务

目录 一、索引 索引是什么&#xff0c;页分裂 页的结构 mysql怎么查询数据 二、页合并 三、行溢出 四、事务 事务四大特性 1、原子性 2、一致性 3、隔离性 4、持久性 事务隔离级别 隔离级别导致的问题 隔离级别与锁的关系 锁与快照读、当前读的关系 RR快照读与…

网页信息采集-网页数据采集方法

随着社会不停的发展。人们也是越来越离不开互联网&#xff0c;今天小编就给大家盘点一下免费的网页信息采集&#xff0c;只需要点几下鼠标就能轻松爬取数据&#xff0c;不管是导出excel还是自动发布到网站都支持。详细参考图片一、二、三、四&#xff01; 企业人员 通过爬取动…

[附源码]计算机毕业设计JAVA创意众筹网站

[附源码]计算机毕业设计JAVA创意众筹网站 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis M…

JavaScript历史上的今天是星期几

前言 &#x1f44f;这个案例有很多点是我之前不知道的&#xff08;因为是小白&#xff09;&#xff0c;所以很值得学习&#xff0c; ✍编程不是打字机&#xff0c;⭐争取明白每个细节&#xff0c;并努力做的更好 步骤 1.html布局&#xff0c;一个下拉菜单&#xff08;如图&…

独家巨献!阿里专家兼Github贡献者业“大师级Dubbo实战笔记”入门到成神

Apache Dubbo是一款RPC服务开发框架&#xff0c;那何为RPC呢&#xff1f;全称为Remote Procedure Call&#xff0c;翻译过来就是远程过程调用。 使用 Dubbo 开发的微服务原生具备相互之间的远程地址发现与通信能力&#xff0c; 利用 Dubbo 提供的丰富服务治理特性&#xff0c;可…

ZYNQ使用AXI4-HP接口总线读取DDR中的数据

一、前言 最近笔者在做项目的时候需要使用zynq中的AXI4-HP总线在PL端读取DDR中的数据这种功能&#xff0c;但是网上很多历程对于这方面只是创建了一个官方提供的IP核用于测试&#xff0c;并且每次写入和读取的长度为4K字节。所以为了满足我自己的项目需求&#xff0c;笔者将官…