当前位置： 首页 > news >正文

Javascript--流程控制

news 2025/12/21 22:09:36

目录

数据类型转换

自动类型转换

强制类型转换

流程控制语句

顺序流程

选择流程

单分支

双分支

多分支

switch

循环流程

for循环

while循环

do...while循环

如何选择

continue和break

循环案例

数据类型转换

        由于 javascrip 这个语言它是弱类型语言，即它对类型的要求不是很强，我们变量的类型最终取决于最后一次赋给这个变量的值。但是，我们在开发中还是会遇到要对数据进行转换的需求。

在进行数据类型转换时，有两种方式：

  • 向下类型转换：也叫强制类型转换，一般发生在大的数据类型向小的数据类型转换。需要强制类型转换

  • 向上类型转换：也叫自动类型转换，一般是小类型向大类型转换，这种方式是自动完成的。

自动类型转换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自动类型转换</title>
</head>
<body>
<script>let a = 10   // intconsole.log(typeof a)  // numbera = 5.6   // floatconsole.log(typeof a)  // number
</script>
</body>
</html>

强制类型转换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>强制类型转换</title>
</head>
<body>
<script>let input = prompt('请输入一个整数')console.log(input, typeof input)
​// 将字符串转换为数值类型let result = parseInt(input)console.log(result, typeof result)
</script>
</body>
</html>

        如果我们希望把数字字符串类型转换为数值类型，我们可以使用 paraseInt() ，使用这个函数时，它会把字符串转换为数值，但是如果这个字符串不能转，则返回 NaN

流程控制语句

流程控制语句也是我们经常听说的三大流程：顺序、选择、循环。

顺序流程

顺序流程指的是：代码的运行顺序是从左到右，从上到下的顺序来执行。

选择流程

        选择结构主要是指：程序在运行过程中，有时需要面临一些不同情况的选择，根据情况执行不同的代码。这个选择结构三种：单分支、双分支、多分支。

单分支

单分支主要是针对一种情况下的判断，需要使用 if 语句来完成。它的使用结构为：

if (条件表达式) {执行语句
}

它的执行流程：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单分支</title>
</head>
<body>
<script>let age = prompt('请输入你的年龄', '18')age = parseInt(age)if (age >= 18) {console.log('你已经成年了。')}
</script>
</body>
</html>

双分支

在单分支的基础上，还可以增加一种情况，当其中一种情况不满足时，就执行另一种情况。它的语法结构如下：

if (条件表达式) {条件为true时执行的代码
} else {条件为false时执行的代码
}

它执行流程图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>双分支</title>
</head>
<body>
<script>let age = parseInt(prompt('请输入你的年龄', '18'))if (age >= 18) {console.log('你已经成年了')} else {console.log('你还未成年')}
</script>
</body>
</html>

多分支

有时我们的情况可能有多种，这时就需要使用多分支，多分支就是多重嵌套的使用。它的语法为：

if (条件表达式1) {表达式1为 true 时执行
} else if (条件表达式2) {表达式2为 true 时执行
} else if (条件表达式3) {表达式3为 true 时执行
} else {以上条件都不满足时执行
}

执行流程：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多分支</title>
</head>
<body>
<script>let age = parseInt(prompt('请输入你的年龄', '18'))if (age <= 12) {console.log('你还要读小学')} else if (age <= 18) {console.log('你在读中学')} else if (age <= 22) {console.log('你在读大学')} else {console.log('你已经进入社会了')}
</script>
</body>
</html>

switch

多分支我们也可以使用 switch 语句来实现，它的语法为：

switch(表达式) {case 值1:语句块1breakcase 值2:语句块2breakcase 值n:语句块nbreakdefault:默认语句块break
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>switch语句</title>
</head>
<body>
<script>let week = parseInt(prompt('请输入今天是星期几'))switch (week) {case 1:console.log('今天是星期一')breakcase 2:console.log('今天是星期二')breakcase 3:console.log('今天是星期三')breakcase 4:console.log('今天是星期四')breakcase 5:console.log('今天是星期五')breakcase 6:console.log('今天是星期六')breakcase 7:console.log('今天是星期天')breakdefault:console.log('你是火星来的')break}
</script>
</body>
</html>

代码分析：

  1. 如果case语句中没有 break，那么它会继续向下执行，直到遇到 break 为止或 switch 代码块结束。

  2. default 语句可以放到 switch 语句的最后，也可以放到 switch 块的意义位置

  3. 如果 default 语句放到最后，则它的 break 是可以省略的；如果不在最后，则 break 语句不能省略

switch语句和多分支的使用场景：

  1. switch语句是多分支语句的简写方式，它的执行效率要比多分支高

  2. 多分支这种方式的使用场景比swtich语句要宽

循环流程

我们有时希望我们某些功能反复的执行，这时就需要使用循环流程。在 JS 中循环流程有以下三种：

  • for 循环

  • while 循环

  • do..while循环

for循环

它的语法格式为：

for (let|var 变量=初值; 条件达式; 变量的步长) {循环体
}

执行流程分析：整个 for 循环分为四步：

第一步：给变量赋初值；

第二步：判断表达式的值是否为 true，如果为 true 则继续执行后面的步骤，如果值为 false 则退出循环

第三步：执行循环体

第四步：执行变量的步长

重复第二步到第四步。也就是说第一步只会执行一次。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>for循环</title>
</head>
<body>
<script>for (let i = 1; i <= 5; i++) {console.log(i)}
</script>
</body>
</html>

需求：计算用户指定的数值内的和。

分析：

  1. 接收用户输入 prompt

  2. 将输入的值转换为整数 parseInt()

  3. 计算结果 for 循环

实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>for循环案例-求和</title>
</head>
<body>
<script>const num = parseInt(prompt('请输入一个整数', '1'))let sum = 0 // 用于存放计算的结果for (let i = 1; i <= num; i++) {sum += i}console.log('sum = ' + sum)
</script>
</body>
</html>

while循环

它的语法如下：

let 循环变量 = 初值
while (条件表达式) {循环体循环变量步长
}

简单使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>while循环</title>
</head>
<body>
<script>let i = 1while (i<=5) {console.log(i)i++}
</script>
</body>
</html>

使用 while 循环来计算用户输入的值的和

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>while循环案例-求和</title>
</head>
<body>
<script>let num = parseInt(prompt('请输入一个整数', '1'))let sum = 0  // 定义一个接收循环计算结果的变量let i = 1 // 循环变量并给他的初值为 1while (i <= num) {sum += ii++}console.log('sum = ' + sum)
</script>
</body>
</html>

do...while循环

它的语法结构：

let 循环变量 = 初值
do {循环体循环变量步长
} while(条件表达式)

简单使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>do...while循环</title>
</head>
<body>
<script>let i = 0do {console.log(i)i--} while (i > 0) // 不 i 的值等于 0 时就退出
</script>
</body>
</html>

从上面的代码运行结果可以发现，虽然条件表达式不满足，但是程序依然执行了一次。

如何选择

  1. 如果循环次数确定，那么优先选择 for 循环

  2. 如果循环次数不确定，那么优先选择 while 循环

  3. 如果循环至少要执行一次，则选择 do...while循环

continue和break

continue 它的作用是结束它所在层本次循环，进入到下一次循环。

break 它的作用是结束它所在层循环

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>continue和break</title>
</head>
<body>
需求：输出 1 ~ 10 之间的偶数，当数为 8 时就结束循环
<script>let num = 10for (let i = 1; i <= num; i++) {if (i === 8) break      // 如果 if 语句块中只有一行，则大括号可以省略
​if (i % 2 === 0) {console.log(i)} else {continue}}
</script>
</body>
</html>

循环案例

需求：输入九九乘法表

1 * 1 = 1
1 * 2 = 2   2 * 2 = 4
1 * 3 = 3   2 * 3 = 6   3 * 3 = 9
1 * 4 = 4   2 * 4 = 8   3 * 4 = 12
1 * 5 = 5   2 * 5 = 10  3 * 5 = 15
1 * 6 = 6   2 * 6 = 12  3 * 6 = 18
1 * 7 = 7   2 * 7 = 14  3 * 7 = 21
1 * 8 = 8   2 * 8 = 16  3 * 8 = 24
1 * 9 = 9   2 * 9 = 18  3 * 9 = 27

分析：

  1. 九九乘法表是有行有列，因此需要循环嵌套，外层循环是行，内层循环是列

  2. 我们可以使用 for、while、do..while，我们在这里循环 for 循环

  3. 我们需要使用制表符（\t）来让每一列有间隔

  4. 我们把九九乘法表输出到页面中，document.write()

实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>循环嵌套-九九乘法表</title>
</head>
<body>
<script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(i + ' * ' + j + ' = ' + (i*j) + '\t\t')}document.write('<br>')}
</script>
</body>
</html>

相关文章：

Javascript--流程控制

目录 数据类型转换 自动类型转换 强制类型转换 流程控制语句 顺序流程 选择流程 单分支 双分支 多分支 switch 循环流程 for循环 while循环 do...while循环 如何选择 continue和break 循环案例 数据类型转换 由于 javascrip 这个语言它是弱类型语言&#xff0c…...

编程日记 2024/1/25 12:32:43

新定义51单片机（RD8G37）实现测距测速仪

本文描述用新定义51单片机&#xff08;RD8G37&#xff09;超声波一体测距传感器实现简单的测距测速仪。 测距仪演示效果 新定义RD8G37Q48RJ开发板 超声波测距模块&#xff1a; 8位并口屏 1、main.c unsigned short timeConsuming0; unsigned int oldDistance;void rectClearS…...

编程日记 2024/1/25 12:30:41

Unity中URP下获取每一个额外灯数据

文章目录 前言一、我们先来看一下 SimpleLit 中的调用二、获取额外灯索引1、非移动平台2、非GLES平台3、大多数平台 三、获取额外灯数据 前言 在上一篇文章中&#xff0c;我们知道了URP下是怎么获取额外灯数量的。 Unity中URP下获取额外灯数量 在这篇文章中&#xff0c;我们…...

编程日记 2024/1/25 12:29:40

差分进化算法求解基于移动边缘计算 （MEC） 的无线区块链网络的联合挖矿决策和资源分配（提供MATLAB代码）

一、优化模型介绍 在所研究的区块链网络中&#xff0c;优化的变量为&#xff1a;挖矿决策&#xff08;即 m&#xff09;和资源分配&#xff08;即 p 和 f&#xff09;&#xff0c;目标函数是使所有矿工的总利润最大化。问题可以表述为&#xff1a; max ⁡ m , p , f F miner …...

编程日记 2024/1/25 12:28:40

Tomcat Notes: Web Security, HTTPS In Tomcat

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial&#xff0c;owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、Overview2、Two Levels Of Web Securi…...

编程日记 2024/1/25 12:27:39

智能小程序登陆能力开发文档及示例代码

小程序登录 涂鸦官方提供了登录能力&#xff0c;开发者可以通过相关 API 获取 App 的用户身份标识&#xff0c;快速的建立小程序内的用户体系。 登录流程 说明 需要调用 ty.login() 获取 临时登录凭证 code&#xff0c;并将 code 传到开发者服务器开发者服务器调用涂鸦云开发…...

编程日记 2024/1/25 12:22:34

常见の算法

前言本文主要使用Java 什么&#xff0c;是快乐星球#&#xffe5;%……什么是算法&#xff1f; 算法是一组完成任务的指令。任何代码片段都可视为算法&#xff0c;但我们主要介绍常见算法 一、引入——二分查找 二分查找是一种算法&#xff0c;其输入是一个有序的元素列表。如…...

编程日记 2024/1/25 12:19:31

openssl3.2/test/certs - 041 - 1024-bit leaf key

文章目录 openssl3.2/test/certs - 041 - 1024-bit leaf key概述笔记END openssl3.2/test/certs - 041 - 1024-bit leaf key 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_git_prj\study\openSSL\test_certs\041\my_openssl_linux_…...

编程日记 2024/1/25 12:18:30

「创新引领未来」科东软件荣获第十二届中国创新创业大赛（广东·广州赛区）优胜奖

近日&#xff0c;广州市科学技术局公布第十二届中国创新创业大赛&#xff08;广东广州赛区&#xff09;暨2023年广州科技创新创业大赛常规赛拟获奖企业名单。科东软件凭借国产化技术创新优势、强大的应用场景落地能力和丰富的行业解决方案&#xff0c;荣获第十二届中国创新创业…...

编程日记 2024/1/25 12:17:29

Linux下安装 Redis7

Linux下安装 Redis7 三、Linux下安装 Redis7【redis-7.2.4.tar.gz】3.1.下载redis的安装包3.1.1.手动下载Redis压缩包并上传【redis-7.2.4.tar.gz】3.1.2.wget工具下载redis-7.2.4.tar.gz 3.2.将安装包进行解压缩3.3.进入redis的安装包3.4.检查是否有gcc 环境3.5.编译和安装并指…...

编程日记 2024/1/25 12:16:27

spire.doc合并word文档

文章目录 spire.doc合并word文档1. 引入maven依赖2. 需要合并的word3. 合并文档代码4. 合并结果 spire.doc合并word文档 1. 引入maven依赖 <repositories><repository><id>com.e-iceblue</id><name>e-iceblue</name><url>https://r…...

编程日记 2024/1/25 12:13:24

蓝桥杯官网填空题（01串的熵）

问题描述 答案提交 这是一道结果填空的题, 你只需要算出结果后提交即可。本题的结果为一 个整数, 在提交答案时只填写这个整数, 填写多余的内容将无法得分。 import java.util.*;public class Main {public static void main(String[] args) {for(double zero1;zero<2333…...

编程日记 2024/1/25 12:10:19

【CodeTop】TOP 100 刷题 51-60

文章目录 51. 缺失的第一个正数题目描述代码与解题思路 52. 训练计划 II题目描述代码与解题思路 53. 子集题目描述代码与解题思路 54. 最小覆盖子串题目描述代码与解题思路 55. 从前序与中序遍历序列构造二叉树题目描述代码与解题思路 56. 零钱兑换题目描述代码与解题思路 57. …...

编程日记 2024/1/25 12:09:18

k8s的图形化工具---rancher

rancher是一个开源的企业级多集群的k8s管理平台。 rancher和k8s的区别&#xff1a;都是为了容器的调度和编排系统。但是rancher不仅可以调度还可以管理整个k8s集群。 rancher自带监控(普罗米修斯) 实验部署 master01 20.0.0.32 node01 20.0.0.34 node02 20.0.0.35 test …...

编程日记 2024/1/25 12:06:16

npm安装卡住问题(最新版)

npm安装卡住问题(最新版) 背景&#xff1a; ​ 最近这两天用npm安装一些包的时候&#xff0c;发现一直卡住&#xff1a; 报错&#xff1a; idealTree:npm: sill idealTree buildDeps之前能用的现在不能用了&#xff0c;我一想&#xff0c;是不是源头的问题&#xff0c;还真是…...

编程日记 2024/1/25 12:05:15

什么是线程死锁

死锁是指两个或两个以上的进程&#xff08;线程&#xff09;在执行过程中&#xff0c;由于竞争资 源或者由于彼此通信而造成的一种阻塞的现象&#xff0c;若无外力作用&#xff0c;它们都将无法推 进下去。此时称系统处于死锁状态或系统产生了死锁&#xff0c;这些永远在互相…...

编程日记 2024/1/25 11:55:06

Django从入门到精通（二）

目录 三、视图 3.1、文件or文件夹 3.2、相对和绝对导入urls 3.3、视图参数requests 3.4、返回值 3.5、响应头 3.6、FBV和CBV FBV 四、静态资源 4.1、静态文件 4.2、媒体文件 五、模板 5.1、寻找html模板 5.2、模板处理的本质 5.3、常见模板语法 5.4、内置模板函…...

编程日记 2024/1/25 11:52:03

建筑物防雷检测安全接地应用解决方案

雷电是一种自然现象&#xff0c;具有极高的电压和电流&#xff0c;对建筑物及其内部设备、人员和财产可能造成严重的危害&#xff0c;如火灾、爆炸、电击、电磁干扰等。因此&#xff0c;建筑物必须采取有效的防雷措施&#xff0c;以保障建筑物的安全和可靠运行。建筑物防雷检测…...

编程日记 2024/1/25 11:48:00

支付宝小程序开发踩坑笔记（支付宝、学习强国小程序）

1、接口请求安卓端回调 success&#xff0c;IOS 端回调 fail 原因&#xff1a;dataType 设置不对&#xff0c;默认是 json 格式&#xff0c;对返回数据会进行 json 解析&#xff0c;如果解析失败&#xff0c;就会回调 fail 。加密传输一般是 text 格式。 2、input 禁止输入空格…...

编程日记 2024/1/25 11:44:57

如何降低微服务复杂度丨云栖大会微服务主题分享实录

作者&#xff1a;谢吉宝 本文整理自阿里云资深技术专家、中间件负责人谢吉宝在2023云栖大会《极简微服务模式&#xff0c;降低微服务复杂度的最佳实践》的分享 2023 云栖大会现场 当面临复杂的挑战时&#xff0c;"分而治之"的方法往往能取得显著的效果。微服务架构…...

编程日记 2024/1/25 11:41:54

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/12/21 3:12:47

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/12/13 2:36:48

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/12/19 23:21:33

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/12/11 5:12:21