前端三剑客 —— JavaScript (第三节)

news2024/10/7 10:24:56

目录

内容回顾:

1.数据类型

2.常见运算符

数据类型转换

自动类型转换

强制类型转换

流程控制语句

顺序流程

选择流程

单分支

多分支

switch

循环流程

for循环

 while循环

do...while循环

如何选择

continue和break

循环案例


内容回顾:

1.数据类型

        1.基本数据类型

                1.数字型(整数、浮点数)Number

                2.布尔型 Boolean - true | false

                3.字符串 “ ""

                4.空值(表示不存在)

                5.未定义 undefined 产生这种类型的原因是:对某个变量声明后未赋值就使用。

                6.判断是否为数字 NaN(Not a Number) -> isNaN(变量) -> true: 不是数字 ; false:是数字

        2.引用数据类型

                1.数组 Array

                2.对象 Object

2.常见运算符

        1.算术运算符

                1.+:表示两个数相加,如果是字符串,表示两个字符串进行拼接

                2.-:表示两个数相减,如果是字符串则会把这个数字字符串转换为数值类后再计算,如果不能转换则为NaN。

                3.*:表示两个数相乘,如果是字符串则会把这个数字字符串转换为数值类后再计算,如果不能转换则为NaN。

                4./:表示两个数相除,如果是字符串则会把这个数字字符串转换为数值类后再计算,如果不能转换则为NaN。

                5.%:表示两个数相除然后取余数

                6.**:表示幂次运算

        2.比较运算符,也叫关系运算符

                1.大于(>),只比较值

                2.大于等于(>=),只比较值

                3.小于(<),只比较值

                4.小于等于(<=),只比较值

                5.不等于(!=),只比较值.如果值不相同则·返回true,否则返回false

                6.完全不等于(!==),既比较值,也比较类型。值和类型任意一个不等就返回true,否则返回false

                7.等于(==),只比较值,只要值相等结果就为true,否则结果为false

                8.全等于(===),既比较值,也比较类型。值和类型都相同则返回true,否则返回false

        3.逻辑运算符

                1.与(&&):当符合前后都为true时结果才为true,否则结果为false

                2.或(||):当符号前后都为false时结果才为false,否则结果为true

                3.非(!):当符号后的值为true时结果为false,否则结果为true

        4.赋值运算符

                1.赋值(=),将等号右边的值赋给等号左边的变量

                2.+=,如 a += 5 它等价于 a = a+5

                3.-=

                4.*=

                5./=

                6.%=

        5.自增/减运算符:如果在前则是先自增/减然后再使用,如果在后则先使用再自增/减。

        6.三目运算符,格式:let变量名 = 表达式?表达式值为true时的值:表达式值为false时的值

        7.位运算符

                1.与(&),都为 1 结果才为1,否则都为 0

                2.或(|),都为 0 结果才为0,否则都为 1

                3.异或(^),相同为 0,不同为 1

数据类型转换

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

在进行数据类型转换时,有两种方式:

--- 向下类型转换:也叫强制类型转换,一般发生在的数据类型向的数据类型转换。需要强制类型转换

--- 向上类型转换:也叫自动类型转换,一般是类型向类型转换,这种方式是自动完成的。

自动类型转换

强制类型转换

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

流程控制语句

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

顺序流程

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

选择流程

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

单分支

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

它的执行流程:

双分支

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

它执行流程图:

多分支

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

执行流程:

switch

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

<!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('今天是星期一')

            break

        case 2:

            console.log('今天是星期二')

            break

        case 3:

            console.log('今天是星期三')

            break

        case 4:

            console.log('今天是星期四')

            break

        case 5:

            console.log('今天是星期五')

            break

        case 6:

            console.log('今天是星期六')

            break

        case 7:

            console.log('今天是星期天')

            break

        default:

            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 循环分为四步:

第一步:给变量赋初值;

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

第三步:执行循环体

第四步:执行变量的步长

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

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

分析:

1. 接收用户输入  prompt

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

3. 计算结果 for 循环

 while循环

它的语法如下:

简单使用:

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

do...while循环

它的语法结构:

简单使用:

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

如何选择

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

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

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

continue和break

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

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

循环案例

需求:输入九九乘法表

分析:

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

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

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

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

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

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

相关文章

Dapr(三) Dapr核心组件的使用一

结合前两期 Dapr(一) 基于云原生了解Dapr(Dapr(一) 基于云原生了解Dapr-CSDN博客) Dapr(二) 分布式应用运行时搭建及服务调用(Dapr(二) 分布式应用运行时搭建及服务调用-CSDN博客) 下篇推出dapr服务注册与发现&#xff0c;dapr组件绑定&#xff0c;dapr Actor功能。 目录 1.…

Java中的常用类详解(Math、Scanner、Random、String)

目录 一、Math&#xff08;数学类&#xff09; 自带常量 取整方法 三角函数方法 指数函数方法 其他方法 二、Scanner&#xff08;实用程序类&#xff09; 三、Random&#xff08;随机数类&#xff09; 四、String&#xff08;字符串类&#xff09; 获取相关 判断相关…

实践笔记-03 docker buildx 使用

docker buildx 使用 1.启用docker buildx2.启用 binfmt_misc3.从默认的构建器切换到多平台构建器3.1创建buildkitd.toml文件&#xff08;私有仓库是http没有证书的情况下&#xff0c;需要配置&#xff09;3.2创建构建器并使用新创建的构建器 4.构建多架构镜像并推送至harbor仓库…

清风DJ,DJ舞曲听不停

hi&#xff0c;大家好我是技术苟&#xff0c;每周准时上线为你带来实用黑科技&#xff01;由于公众号改版&#xff0c;现在的公众号消息已经不再按照时间顺序排送了。因此小伙伴们就很容易错过精彩内容。喜欢黑科技的小伙伴&#xff0c;可以将黑科技百科公众号设为标星&#xf…

如何选择适合智能型程控直流电子负载

在选择适合智能型程控直流电子负载时&#xff0c;需要考虑以下几个方面&#xff1a; 根据实际需求选择合适的负载容量&#xff0c;负载容量是指电子负载能够承受的最大电流和电压。一般来说&#xff0c;负载容量越大&#xff0c;价格越高。因此&#xff0c;在满足实际需求的前提…

Qt实现Kermit协议(四)

3 实现 3.3 KermitRecvFile 该模块实现了Kermit接收文件功能。 序列图如下&#xff1a; 3.3.1 KermitRecvFile定义 class QSerialPort; class KermitRecvFile : public QObject, public Kermit {Q_OBJECT public:explicit KermitRecvFile(QSerialPort *serial, QObject *…

【SCI绘图】【小提琴系列1 python】绘制按分类变量分组的垂直小提琴图

SCI&#xff0c;CCF&#xff0c;EI及核心期刊绘图宝典&#xff0c;爆款持续更新&#xff0c;助力科研&#xff01; 本期分享&#xff1a; 【SCI绘图】【小提琴系列1 python】绘制按分类变量分组的垂直小提琴图&#xff0c;文末附完整代码 小提琴图是一种常用的数据可视化工具…

YUM仓库和编译安装

目录 一.YUM仓库搭建 1.简介&#xff1a; 2.搭建思路&#xff1a; 3.实验&#xff1a;单机yum的创建 二.编译安装 1.简介 2.安装过程 3.实验&#xff1a;编译安装nginx 一.YUM仓库搭建 1.简介&#xff1a; yum是一个基于RPM包&#xff08;是Red-Hat Package Manager红…

深度学习500问——Chapter06: 循环神经网络(RNN)(3)

文章目录 6.11 LSTM 6.11.1 LSTM的产生原因 6.11.2 图解标准RNN和LSTM的区别 6.11.3 LSTM核心思想图解 6.11.4 LSTM流行的变体 6.12 LSTMs与GRUs的区别 6.13 RNNs在NLP中的典型应用 6.11 LSTM 6.11.1 LSTM的产生原因 RNN在处理长期依赖&#xff08;时间序列上距离较远的…

DC电源模块在电子设备中的应用场景

BOSHIDA DC电源模块在电子设备中的应用场景 DC电源模块在电子设备中广泛应用于以下场景&#xff1a; 1. 电子产品&#xff1a;如手机、平板电脑、笔记本电脑等便携式设备&#xff0c;这些设备通常需要稳定的直流电源来供电。 2. 工业设备&#xff1a;包括自动化设备、工业机器…

【绘图案例-绘制图片 Objective-C语言】

一、绘制图片 1.接下来,我们来说这个绘制图片啊,把之前的copy代码复制粘贴一份儿,名字改成“05-绘制图片”, 1)首先:绘制图片,你要有图片,思路都是一样的,你绘制啥,首先要有啥, 素材里边,我们来说一下啊,这个里边儿,主要来说一下,小图、和、大图、的区别, 然后…

通过 Cookie、Redis共享Session 和 Spring 拦截器技术,实现对用户登录状态的持有和清理(四)

本篇内容对应 “2.5 开发登录、退出功能” 小节 “4.7 优化登陆模块” 小节 2.6 显示登录信息 2.7 账号设置 2.8 检查登录状态 登录功能的流程是什么&#xff1f; UUID为什么不会重复&#xff1f; 因为UUID是基于mac物理地址、时间戳、随机数等信息生成。因此UUID居于极高的唯…

太阳能光伏电子实验酸洗用PFA方槽耐受强酸碱耐高温

PFA清洗槽是四氟清洗桶后的升级款&#xff0c;主要用于半导体光伏光电等行业&#xff0c;一体成型&#xff0c;无需担心漏液&#xff0c;表面光滑无毛刺。 别名PFA浸泡桶、PFA酸缸、PFA方槽等&#xff0c;可定制尺寸&#xff0c;可配套盖子&#xff0c;盖子有PFA/PTFE两种材质…

智过网:一建继续教育,操作指南与周期解析

随着社会的快速发展和技术的不断更新&#xff0c;建筑行业对从业人员的专业素质要求也在逐步提高。为了确保一级建造师的专业技能能够与时俱进&#xff0c;满足行业发展的需求&#xff0c;继续教育成为了必不可少的环节。本文将详细解析一建继续教育的操作流程及其周期安排&…

Hugging Face入门(一)

简介 本文主要内容&#xff1a; Hugging Face介绍环境搭建敲两个例子 Hugging Face介绍 Hugging Face 是一家法美合资公司&#xff0c;总部位于纽约市&#xff0c;成立于2016年。它由法国企业家Clment Delangue、Julien Chaumond和Thomas Wolf在纽约市创立&#xff0c;最初是…

让智能体像孩子一样观察别人学习动作,跨视角技能学习数据集EgoExoLearn来了

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 在探索人工智能边界时&#xff0c;我们时常惊叹于人类孩童的学习能力 —— 可以轻易地将他人…

基于SpringBoot的高校自习室预约系统

基于SpringBoot的高校自习室预约系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统功能分析 本次的功能设计主要围绕着学生和管理员两个角色&#xff0c;对于学生的用…

AI预测福彩3D第29弹【2024年4月7日预测--第7套算法重新开始计算第2次测试】

今天咱们继续进行进行第7套算法的测试&#xff0c;今天是第2次测试&#xff0c;昨天已经成功命中&#xff0c;其中7码大方案全部命中&#xff0c;四码小方案也命中。再接再厉&#xff0c;继续验证&#xff0c;废话不多说&#xff0c;直接上图上结果~ 2024年4月7日3D的七码预测结…

集合容器面试题

Java 容器都有哪些&#xff1f; Java 容器分为 Collection 和 Map 两大类 Collection 和 Collections 有什么区别&#xff1f; Collection 是一个集合接口&#xff0c;它提供了对集合对象进行基本操作的通用接口方法&#xff0c;所有集合都是它的子类&#xff0c;比如 List、…

电商卖家如何从1688批量采集商品信息并铺货到自己店铺?

目前&#xff0c;各大电商平台严查无货源&#xff0c;不管是已经开店还是准备开店的卖家&#xff0c;想要店铺长久发展&#xff0c;都需要从1688找授权分销的厂家拿货源铺货。 然而很多新手卖家在1688找货源时&#xff0c;不知道如何找到物美价廉的源头厂货&#xff0c;选好货…