Javascript--流程控制

目录

数据类型转换

自动类型转换

强制类型转换

流程控制语句

顺序流程

选择流程

单分支

双分支

多分支

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>

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

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

相关文章

SpringBoot实现热部署

一、热部署&#xff08;Hot Swap&#xff09; 从Java1.4起&#xff0c;JVM引入了HotSwap&#xff0c;能够在Debug的时候更新类的字节码。所以使用热部署&#xff0c;可以实现修改代码后&#xff0c;无须重启服务就可以加载修改的代码&#xff0c;但是它只能用来更新方法体。 实…

Git学习笔记:3 git tag命令

文章目录 git tag 基本用法1. 创建标签2. 查看标签3. 删除标签4. 推送标签到远程仓库5. 检出标签 普通提交和标签的区别1. 提交&#xff08;Commit&#xff09;2. 标签&#xff08;Tag&#xff09; git tag 基本用法 git tag 是 Git 中用于管理和操作标签&#xff08;tag&…

2023-2024年重庆职业院校技能大赛“信息安全管理与评估”比赛样题

2023 年重庆职业院校技能大赛&#xff08;高等职业教育&#xff09; “信息安全管理与评估”样题任务书 第一阶段&#xff1a;任务 1 网络平台搭建&#xff08;50 分&#xff09;任务 2 网络安全设备配置与防护&#xff08;250 分&#xff09; 第二阶段&#xff1a;第一部分 网…

web蓝桥杯真题--14、关于你的欢迎语

介绍 营销号&#xff0c;有时候需要一些特定的欢迎语&#xff0c;但针对特定的用户&#xff0c;我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题&#xff0c;实现根据模版生成特定用户的欢迎语。 准备 本题已经内置了初始代码&#xff0c;打开实验环境&…

Backend - Django URL 路由 重定向

目录 一、url 的 <> 作用 &#xff08;一&#xff09;操作流程 &#xff08;二&#xff09;前端设置链接 1. 包括&#xff1a; 2. 比如 &#xff08;三&#xff09;后端匹配路由 1. 理解 2. 比如 &#xff08;三&#xff09;后端视图的 get( )的参数 1. 理解 …

python绘图创建两个坐标轴 共享一个x轴

在Matplotlib中&#xff0c;可以使用twiny()或者twinx()方法创建一个共享一条轴线的第二个坐标轴&#xff0c;从而实现绘制两个坐标轴的效果 import matplotlib.pyplot as plt import numpy as np# 创建一些示例数据 x np.linspace(0, 10, 100) y1 np.sin(x) y2 np.cos(x)#…

第十四届蓝桥杯国赛 C++ B 组 G 题——AB路线(AC)

目录 1. AB路线1. 问题描述2. 输入格式3. 输出格式4. 样例输入5. 样例输出6. 样例说明7. 评测用例规模与约定8. 原题链接 2. 解题思路3. AC_Code 1. AB路线 前置知识点&#xff1a;BFS (广度优先搜索) 1. 问题描述 有一个由 N M N \times M NM 个方格组成的迷宫&#xff0…

flutter-相关个人记录

1、flutter 安卓打包打包报错 flutter build apk -v --no-tree-shake-icons 2、获取华为指纹证书命令 keytool -list -v -keystore ***.jks 3、IOS项目中私有方法查找隐藏文件中 1、cd 项目目录地址 2、grep -r xerbla. "xerbla"为需要查找的关键字 3…

【秒剪】如何一键恢复至素材原长?

Step1:点击下方【剪辑】 Step2:点击【时长截取】 Step3:点击【恢复至原长】 Step4:点击【恢复所有片段到原长】

推荐一个还可以的windows ssh工具

1.下载 https://github.com/kingToolbox/WindTerm/releases 2.解压 3.使用 上传 下载都很快 比cmd窗口好用 当然和finalshell有点像

JAVASE进阶(设计模式、设计原则)

目录 一、注解 内置注解:JAVA中已经定义好的注解。 元注解:修饰注解的注解。 自定义注解。 二、克隆 JAVA中对clone的实现? 浅克隆 深克隆 那么该如何做到深克隆呢? 三、常用设计模式 1、创建型模式 单例模式 工厂模式 工厂方法模式 抽象工厂模式 原型模式 一、注…

系统登录的时候的密码如何做到以加密的形式进行登录【java.security包下的api】工具类。

/** description: 将普通的publicKey转化得到一个RSAPublicKey* author: zkw* date: 2024/1/24 16:17* param: publicKey 普通的publicKey* return: RSAPublicKey 得到一个新的RSAPublicKey**/public static RSAPublicKey getPublicKey(String publicKey) throws NoSuchAlgorit…

oracle数据库插入或者更新判断是否存在记录的SQL

oracle数据库插入或者更新判断是否存在记录的SQL 1、插入的时候判断是否存在&#xff0c;若存在则忽略&#xff0c;若不存在则插入 写法① insert into student(id,name,sex) select 111,张三,女 from dual where not exists (select 1 from student where id 111)写法② …

vue中图片不显示问题 - vue中静态资源加载

文章目录 vue中图片不显示问题静态资源URL 转换规则webpack 静态资源处理 图片不显示问题问题描述解决办法1&#xff1a;使用require引入require is not defined 解决办法2&#xff1a;使用import引入解决办法3&#xff1a;将图片放进公共文件夹static或public vue中图片不显示…

代码随想录算法训练营第十四天|104.二叉树的最大深度,559.n叉树的最大深度,111.二叉树的最小深度,222.完全二叉树的节点个数

系列文章目录 代码随想录算法训练营第一天|数组理论基础&#xff0c;704. 二分查找&#xff0c;27. 移除元素 代码随想录算法训练营第二天|977.有序数组的平方 &#xff0c;209.长度最小的子数组 &#xff0c;59.螺旋矩阵II 代码随想录算法训练营第三天|链表理论基础&#xff…

Qt 鼠标按下移动释放事件

文章目录 1 通过自定义控件实现1.1 鼠标跟踪 2 鼠标事件移动标签 QEvent::MouseButtonPress ​ 鼠标按下时&#xff0c;触发该事件&#xff0c;它对应的子类是QMouseEvent QEvent::MouseMove ​ 鼠标移动时&#xff0c;触发该事件&#xff0c;它对应的子类是QMouseEvent QEv…

《解锁R统计分析:深度探索R Commander图形界面》

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在数据科学与大数据技术的浪潮中&#xff0c;R…

基于Java的学生宿舍门禁信息管理系统的设计与实现(源码+lw+部署文档+讲解等

目录 前言 详细视频演示 具体实现截图 技术栈 后端框架SpringBoot 前端框架Vue 持久层框架MyBaitsPlus 系统测试 系统测试目的 系统功能测试 系统测试结论 代码参考 数据库代码参考 源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、…

Cesium 常见配置

文章目录 常见配置1. 修改天空背景(skyBox)2. 去除版权信息3. 增加太阳光照效果4. 实现昼夜联动效果5. 显示帧数6. 增加太阳光照7. 大气层显示8. 开启地形深度检测9. 禁止相机进入地下10. 右键拖拽场景倾斜11. 关闭抗锯齿12. 鼠标操作惯性控制13. 自动调整分辨率14. 默认定位到…

记录:云计算学习日常之shell

一、初识shell 文件描述符与输出重定向&#xff1a; 在shell程式中&#xff0c;最常使用的FD(filedescriptor)有三个&#xff0c;分别是&#xff1a; 0&#xff1a;Standard Input(STDIN) 1&#xff1a;Standard Output(STDOUT) 2&#xff1a;Standard Error Output(STDER…