Web前端-JavaScript(js循环)

1.循环

1.1 for循环

  • 语法结构
for(初始化变量; 条件表达式; 操作表达式 ){//循环体
}
名称作用
初始化变量通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。
条件表达式用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。
操作表达式用于每次代码执行完毕之后进行,初始化变量的累加
  • 执行过程:

    • 初始化变量,初始化操作在整个 for 循环只会执行一次。
    • 执行条件表达式,如果为true,则执行循环体语句,否则退出循环,循环结束。
  • for 循环重复相同的代码

    比如输出10句“未来可期”

    //  基本写法
    for(var i = 1; i <= 10; i++){alert('未来可期~');
    }
    
  • for循环案例练习:

    ​ 求1-100之间的整数累加和

    ​ 求1-100之间所有数的平均值

    ​ 求1-100之间所有偶数和奇数的和

    var sum=0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum)//5050var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;
    }console.log(sum/100)//50.5var sum1 = 0;var sum2 = 0;
    for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {sum1 += i;} else {sum2 += i;}}console.log(sum1)//2550console.log(sum2)//2500                     
    
    调试
    过去调试javascript的方式:
    alert()
    console.log()
    

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

    断点调试的流程:
    1、浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
    2、Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
    3、摁下F11,程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。

1.2 双重for循环

  • 双重 for 循环语法

    • 内层循环可以看做外层循环的循环体语句
    • 内层循环执行的顺序也要遵循 for 循环的执行顺序
    • 外层循环执行一次,内层循环要执行全部次数
    var str = '';for (var i = 1; i <= 5; i++) {for (var j = 1; j <= 5; j++) {str += i + "" + j+","}str += "\n"}console.log(str)
    
    11,12,13,14,15,
    21,22,23,24,25,
    31,32,33,34,35,
    41,42,43,44,45,
    51,52,53,54,55,
    
  • 打印五行五列星星

    var star = '';
    for (var j = 1; j <= 5; j++) {for (var i = 1; i <= 5; i++) {star += '☆'}// 每次满 5个星星 就 加一次换行star += '\n'
    }
    console.log(star);
    

    练习:

    1.打印倒三角形

//##### i=1 j5 6-1=5
//#### i=2 j4
//###
//##
//#
var str = ‘’;
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 6 - i; j++) {
str += “#”
}
str += “\n”
}
console.log(str)

### 1.3 while循环while语句的语法结构如下:```js
while (条件表达式) {// 循环体代码 
}

执行思路:

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

  • 2 执行循环体代码

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

    var total=1;
    while(total<521){console.log("老鼠爱大米");total++;
    }
    console.log("共计执行了"+total+"次")
    

注意:

  • 使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环

1.4 do-while循环

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

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

执行思路

  • 先执行一次循环体代码

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

  • do…while循环语句至少会执行一次循环体代码

    练习:输入用户名密码:用户名是admin,密码为123456提示登录成功,否则一直重复输入

     do {var name = prompt("请输入户名");var passowrd = prompt("请输入密码");
    } while (name != "admin" || passowrd != 123);
    alert("登录成功")
    

1.5 跳转语句

continue

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

例如,吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子,其代码实现如下:

 for (var i = 1; i <= 5; i++) {if (i == 3) {console.log('这个包子有虫子,扔掉');continue; // 跳出本次循环,跳出的是第3次循环 }console.log('我正在吃第' + i + '个包子呢');}

运行结果:

image-20230219204436327

break

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

例如,吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了,其代码实现如下:

for (var i = 1; i <= 5; i++) {if (i == 3) {break; // 直接退出整个for 循环,跳到整个for下面的语句}console.log('我正在吃第' + i + '个包子呢');}

运行结果:

image-20230219204456685

课堂案例:

使用do–while与break完成输入用户名案例

<script>var yonghuming = prompt("请输入用户名")var mima = prompt("请输入密码")while (true) {if (yonghuming == "admin" && mima == "123456") {alert("登录成功")break;} else {alert("输入错误,请重新输入")yonghuming = prompt("请输入用户名")mima = prompt("请输入密码")}}alert("over")</script>

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

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

相关文章

Git账户密码http方式的配置

Git账户密码http方式的配置 入门 git在提交时每次都需要输入密码和账号信息&#xff0c;可以将账号和密码进行持久化存储&#xff0c; 当git push的时候输入一次用户名和密码就会被记录&#xff0c; 不需要每次输入&#xff0c;提高效率&#xff0c;进行一下配置&#xff1…

深入学习《大学计算机》系列之第1章 1.4节——从二进制起源窥见的奥秘

一.欢迎来到我的酒馆 第1章 1.4节&#xff0c;从二进制起源窥见的奥秘。 目录 一.欢迎来到我的酒馆二.二进制的起源1.关于莱布尼茨2.莱布尼茨和牛顿的恩怨情仇 二.二进制的起源 本节内容属于知识拓展&#xff0c;通过讲解几个小故事&#xff0c;向大家介绍二进制的起源。 1.关…

基于低代码的文档管理系统:实现高效协作与控制

在企业和组织中&#xff0c;文档管理是一项至关重要的任务。文档包括各种类型的信息&#xff0c;如合同、报告、会议记录、产品规格等&#xff0c;它们都需要被妥善保管并确保随时可供查阅。 传统的文档管理方法往往效率低下&#xff0c;且容易出错。随着技术的发展&#xff0…

亚信安慧AntDB数据库引领大数据新纪元,星河案例彰显卓越表现

亚信科技及其附属公司亚信安慧在第六届大数据“星河”案例评选中&#xff0c;凭借其卓越的数据库技术实力&#xff0c;再次站在了行业的聚光灯下。这次的显著成果不仅是对亚信科技技术能力的肯定&#xff0c;更是对其在数据库领域持续创新和领先地位的认可。 图&#xff1a;亚信…

3D小球跑酷

目录 一、前言 二、开发环境 三、场景搭建 1. 创建项目 2. 创建场景内物体 2.1 创建跑道 2.2 创建玩家 2.3 创建障碍物 2.4 改变跑道和障碍物的颜色 2.4.1 创建材质 2.4.2 给跑道和障碍物更换材质 四、功能脚本实现 1. 创建玩家脚本 2. 相机跟随 3. 胜负的判定 3…

单光子如何“玩转”单原子?| 量子简史

在量子力学诞生约100年后的今天&#xff0c;物理学家仍在不断了解光与物质之间的相互作用。 上世纪初&#xff0c;量子力学发展的驱动力之一是人们需要了解为什么原子只能发出特定波长的光。不久之后&#xff0c;量子力学被应用于分子&#xff0c;然后是固体。从另一个方向来看…

Springboot数据加密篇

一、密码加密 1.1Hash算法(MD5/SHA-512等) 哈希算法&#xff0c;又称摘要算法&#xff08;Digest&#xff09;&#xff0c;是一种将任意长度的输入通过散列函数变换成固定长度的输出的单向密码体制。这种映射的规则就是哈希算法&#xff0c;而通过原始数据映射之后得到的二进制…

STM32——串口通信应用篇

一、引言 STM32微控制器是一款功能强大的嵌入式系统芯片&#xff0c;广泛应用于各种领域。其中&#xff0c;串口通信是其重要功能之一&#xff0c;可用于与外部设备进行数据交换和控制。本文将介绍STM32串口通信的基本原理、应用场景以及实现方法。 二、STM32串口通信基本原理 …

三维模型轻量化工具

老子云三维模型服务平台&#xff1a;常规模型轻量化通过底层算法快速有效的对常规模型进行轻量化处理&#xff0c;目前包含两种处理模式&#xff1a;减面模式、合并模式。 减面模式&#xff1a;保留原始模型信息&#xff0c;仅使模型网格更轻量。合并模式&#xff1a;合并模型材…

探秘 AJAX:让网页变得更智能的异步技术(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Linux笔记---网络操作命令详细介绍

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux学习 ⛳️ 功不唐捐&#xff0c;玉汝于成 前言&#xff1a; 网络操作是Linux系统中常见的任务之一&#xff0c;它涵盖了测试网络连接、配置网络接口、显示网络统计信息以及远程登录和文件传…

178. 第K短路(A*启发式算法)

178. 第K短路 - AcWing题库 给定一张 N 个点&#xff08;编号 1,2…N&#xff09;&#xff0c;M 条边的有向图&#xff0c;求从起点 S 到终点 T 的第 K 短路的长度&#xff0c;路径允许重复经过点或边。 注意&#xff1a; 每条最短路中至少要包含一条边。 输入格式 第一行包…

测试工具Jmeter:界面介绍、核心选项说明、核心选项用途

本文章主要介绍Jmeter的界面布局&#xff0c;以及各个选项的功能和它们的用途。 JMeter基本原理是建立一个线程池&#xff0c;多线程运行取样器产生大量负载&#xff0c;在运行过程中通过断言来验证结果的正确性&#xff0c;通过监听器来记录测试结果。 1. Jmeter主界面 当我…

多维时序 | MATLAB实现SSA-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现SSA-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-CNN-LSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现SSA-CNN-LST…

路由器设置代理IP教程,http代理怎么固定IP地址?

路由器设置代理IP教程 一、确定代理IP地址 首先&#xff0c;你需要确定你要使用的代理IP地址。你可以从代理服务提供商处获取代理IP地址和端口号。 二、登录路由器管理界面 在浏览器中输入路由器的IP地址&#xff0c;输入账号和密码&#xff0c;进入路由器的管理界面。 三、设置…

【MATLAB第83期】基于MATLAB的LSTM代理模型的SOBOL全局敏感性运用

【MATLAB第83期】基于MATLAB的LSTM代理模型的SOBOL全局敏感性运用 引言 在前面几期&#xff0c;介绍了敏感性分析法&#xff0c;本期来介绍lstm作为代理模型的sobol全局敏感性分析模型。 【MATLAB第31期】基于MATLAB的降维/全局敏感性分析/特征排序/数据处理回归问题MATLAB代…

基于单片机的火灾报警器 (论文+源码)

1.系统设计 本系统由火灾检测模块、A/D转换模块、信号处理模块、声光报警模块和灭火装置模块组成。火灾检测模块由温度检测和烟雾检测构成&#xff0c;其温度传感器选用DS18B20&#xff0c;烟雾传感器选用MQ-2烟雾传感器。A/D转换模块选用常用的模数转换芯片ADC0832。声光报警模…

比PPT还好用的翻页电子书

翻页电子书是一种将纸质书籍转化为电子设备的书籍形式。它具有与纸质书相同的外观和手感&#xff0c;但可以通过手指翻页&#xff0c;实现更加便捷的阅读体验。同时&#xff0c;翻页电子书还具有一些独特的功能&#xff0c;如插入图片、音频、视频等多媒体素材&#xff0c;让阅…

Nginx快速入门:Nginx应用场景、安装与部署(一)

1. Nginx简介 Nginx 是一个高性能的 HTTP 和反向代理服务器&#xff0c;也是一个非常流行的开源 Web 服务器软件。它是由俄罗斯程序员 Igor Sysoev 开发的&#xff0c;最初是为了解决在高并发场景下的C10k 问题&#xff08;即一个服务器进程只能处理 10,000 个并发连接&#x…

嵌入式中串口输入

学习目标 掌握串口初始化流程掌握串口接收逻辑了解中断接收逻辑熟练掌握串口开发流程学习内容 需求 串口接收PC机发送的数据。 串口数据接收 串口初始化 static void USART_config() {uint32_t usartx_tx_rcu = RCU_GPIOA;uint32_t usartx_tx_port = GPIOA;uint32_t usartx…