【H2O2|全栈】JS入门知识(二)

news2024/12/23 13:25:35

目录

JS

前言

准备工作

运算符

算数运算符

比较运算符

自增、自减运算符

逻辑运算符

运算符的优先级

分支语句

if-else语句

switch语句

三元表达式

结束语


JS

前言

本系列博客主要分享JavaScript的基础语法知识,本期为第二期,包含一些简单的js语法,以及一道js的面试题。

叠甲:非专业,仅参考。

准备工作

软件:【参考版本】Visual Studio Code

插件(扩展包):Open in browser, Live Preview, Live Server

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

*我的电脑是Win10的版本,仅供参考*

运算符

算数运算符

JS提供了一些常用的运算符号,与算数中的运算符一一对应,所以又叫算数运算符

常见的算数运算符如下:

符号含义
+加法
-减法
*乘法
/除法(除以)
%取余
&与运算(布尔值转化为0/1)
|或运算(布尔值转化为0/1)

比较运算符

JS中,我们常常会遇到一些大小或者属性不一致的值需要比较,这个时候就需要用到我们的比较运算符

常见的比较运算符如下: 

符号含义
==  !=比较两者的值是否一致
===  !==比较两者的类型、值是否都一致
>=  >  <=  <比较两者的值之间的大小关系

自增、自减运算符

如果我们想让一个数字的值在原来的基础上加一,常规的方式是:

a = a + 1

上面的代码实质上实现了运算赋值两个功能。 

想要同时实现这两个功能,我们还可以用自增的方式,自增的方式分为两种:

  • 前自增        ++a
  • 后自增        a++

对于前自增,实际上的操作为先进行+1运算,再参与后续运算,即先赋值,再计算。 

而后自增则是先计算,再赋值。

案例

比如,我现在有下面这个这段代码:

var a = 10, b = 16
let c = a++ + ++b + b++
alert(c)

那么,输出的值应当是多少呢?

分析题目,在赋值式中,第一步是a++,所以参与运算的是10,而a在这里变成了11。

第二步是++b,所以这里是b先变成了17,然后让17参与运算,所以这里的计算变为10 + 17。

第三步是b++,参与运算的是17,然后b变成了18,所以这里的计算变为10 + 17 + 17。

因此,输出的值应当是44。

逻辑运算符

在进行真值判定运算的时候,我们经常需要涉及到逻辑运算符的使用。

常见的逻辑运算符有下面三种:

符号含义
&&(短路)与
||(短路)或

在多个使用  &&  相连的判定语句中,只要有一个条件的真值为false,则整个式子的值就是false。

而在多个使用  ||  相连的判定语句中,只要有一个条件的真值为true,则整个式子的值就是true。

如果式子中同时出现  &&  运算和  ||  运算,则优先计算  &&  的结果。

在使用 !的式子中,如果式子为true,则取反,即整体输出为false。

案例

比如,我们需要判断一个数字是否在1和10之间,那么就需要用到下面的式子:

var a = 6
var b = a > 1 && a < 10
alert(b)

那么,输出的值是多少呢?

显然,a同时满足大于1和小于10两个条件,因此输出的值应当是true。

运算符的优先级

在使用运算符计算时,显然存在计算的先后顺序,即存在运算符之间的优先级。 

优先级自上而下排列为:

优先级运算符注释
1()小括号
2++  -- 自增运算符
3*  /  +  -算数运算符
4>  >=  <  <=大小比较运算符
5==  !=  ===  !==值、类型/值比较运算符
6&&逻辑与
7||逻辑或
8!逻辑非
9=赋值
10,逗号

分支语句

if-else语句

该语句的中文释义为如果……就……否则,用于判断是否满足某种条件,并执行相应条件下的代码。

该语句的标准代码格式如下:

if (判断条件1) {
    执行语句1
} else if (判断条件n) {
    执行语句n
} else {
    不满足上述条件时才执行的代码
}

如果只需要判定一个条件是否满足,则不需要用到 else if 语句。

如果需要判定多个条件执行对应的代码,则可以使用多组else if语句。

案例

比如,我们需要判断一个学生的成绩等级,分为90及以上的、60到89分的和60分以下的三个等级,使用if语句来实现:

var sc = +prompt("请输入分数")

if (sc >= 90) {
    alert("优秀")
}  else if (sc >= 60 && sc < 90) {
    alert("及格")
} else {
    alert("不及格")
}

switch语句

如果我们的判断条件为一个一个单独的数值(枚举类型),而不是一段一段的区间,则可以使用switch语句来操作。

该语句的标准代码如下:

switch(参数值) {
    case 参数值1:
        执行语句1
        break
    case 参数值n:
        执行语句n
        break
    default:
        所有条件都不符合时执行的语句
}

如果参数值较少,则使用if语句会更加方便。 

break的作用是结束当前的执行语句,否则程序会一直执行,直到下一个break语句或者default。

案例

输入年份和月份,输出这个月有多少天。 

分析:首先,我们需要获取月份,输出这个月对应的天数;

但是,2月是比较特殊的,所以获取的年份信息需要在月份为2月时提供闰年的判定。

JS代码如下:

var year = +prompt("请输入年份");
var month = +prompt("请输入月份")
switch (month) {
    case 1,3,5,7,8,10,12:
        alert(year + "年的" + month + "月有31天");
        break;
    case 4,6,9,11:
        alert(year + "年的" + month + "月有30天");
        break;
    case 2:
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert(year + "年的" + month + "月有29天");
        } else {
            alert(year + "年的" + month + "月有28天");
        }
        break;
    default:
        alert("输入错误");
        break;
}

三元表达式

如果只有两种情况,除了使用if语句之外,还有一种更加简洁的方式——三元运算符表达式

标准的三元运算符表达式如下:

判断条件 ? 条件为真执行的语句 : 条件为假执行的语句

案例

比如,如果想要输出两个数的最大值,可以使用下面的代码:

var a = 3, b = 5
let c = a > b ? a : b

结束语

本期的内容到这里就结束了,主要是js的运算符、分支语句和表达式等内容。在后续的本系列博客中,我会继续更新js的基础语法知识,并适当地配合上一些案例。

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——还在漏气的【H2O2】

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

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

相关文章

平时使用Xshell能连接虚拟机,现在突然连接不上

问题&#xff1a;平时使用Xshell能连接虚拟机&#xff0c;现在突然连接不上&#xff0c;使用ip addr 命令查看ip地址 ens33 接口状态为 DOWN&#xff0c;没有分配IP地址&#xff0c;这通常意味着该网络接口未激活或存在配置问题。&#xff08;因为平时能连接&#xff0c;就说明…

mysql 09 独立表空间结构

表空间中的页实在是太多了&#xff0c;为了更好的管理这些页面&#xff0c;设计 InnoDB 的大叔们提出了 区 &#xff08;英文名&#xff1a; extent &#xff09;的概念。对于16KB的页来说&#xff0c;连续的64个页就是一个 区 &#xff0c;也就是说一个区默认占用1MB空间大小。…

农作物苹果叶片病虫害识别数据集

农作物苹果叶片病虫害识别数据集 一、引言 农作物病虫害是影响农业生产的重要因素之一&#xff0c;其中苹果作为广泛种植的水果品种&#xff0c;其叶片病虫害问题尤为突出。为了有效应对苹果叶片病虫害&#xff0c;提高苹果产量和品质&#xff0c;农业科研机构和学者不断开展…

2024软考网络工程师笔记 - 第4章.局域网和城域网

文章目录 局域网基础1️⃣局域网和城域网体系架构 IEEE&#xff08;负责链路层&#xff09;2️⃣局域网拓扑结构 &#x1f551;CSMA/CD1️⃣CSMA/CD2️⃣CSMA/CD三种监听算法3️⃣冲突检测原理 &#x1f552;二进制指数退避算法1️⃣ 二进制指数退避算法 &#x1f553;最小帧长…

你的抠图最快速度是多久?

前言 在图像处理的过程中&#xff0c;抠图速度和质量往往是大家非常关注的问题。那么&#xff0c;你的抠图最快速度是多久呢&#xff1f;今天我要给大家分享一个我用过的极为方便的抠图工具 —— 千鹿 AI。 只需要简单地上传图片&#xff0c;几秒钟后&#xff0c;就能得到一张…

【超详细】TCP协议

TCP(Transmission Control Protocol 传输控制协议) 传输层协议有连接可靠传输面向字节流 为什么TCP是传输控制协议呢&#xff1f; 我们以前所看到的write接口&#xff0c;都是把用户级缓冲区的数据拷贝到发送缓冲区中&#xff0c;然后数据就由TCP自主决定了&#xff0c;所以…

29.第二阶段x86游戏实战2-遍历周围-花指令与二叉树数据结构(有如何阅读vm代码混淆代码)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要…

到底是微服务,还是SOA?

引言&#xff1a;大概正式工作有5年了&#xff0c;换了三个大厂【也是真特么世道艰难&#xff0c;中国互联网人才饱和了】。基本上每个公司有的架构都不太相同&#xff0c;干过TOC和TOB的业务&#xff0c;但是大家用的架构都不太相同。有坚持ALL in one的SB&#xff0c;最后服务…

windows下安装、配置neo4j并服务化启动

第一步&#xff1a;下载Neo4j压缩包 官网下载地址&#xff1a;https://neo4j.com/download-center/ &#xff08;官网下载真的非常慢&#xff0c;而且会自己中断&#xff0c;建议从以下链接下载&#xff09; 百度网盘下载地址&#xff1a;链接&#xff1a;https://pan.baid…

李生——2024年特别推荐中国品牌艺术家

李生北京人&#xff0c;字玄鹤、云鹤&#xff0c;号墨湖斋&#xff0c;玄鹤楼&#xff0c;中国共产党党员。主要成就:中国著名书法家、国家高级书法师、中国当代正能量文艺工作者:时代标杆等荣誉称号&#xff0c;现为中国东方文化研究会科教文化艺术专业委员会副研究员。自幼喜…

基于Python的博客系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

JavaSE——泛型

目录 一、泛型的引入 二、泛型的好处 三、泛型介绍 四、泛型的语法 (一)泛型的声明 (二)泛型的实例化 五、泛型使用的注意事项和细节 六、泛型练习题1 七、自定义泛型 (一)自定义泛型类 (二)自定义泛型接口 (三)自定义泛型方法 八、泛型练习题2 九、泛型的继承和…

【Linux-进程间通信】vscode使用通信引入匿名管道引入

一、新系统&#xff0c;新软件 1.新系统 哈喽宝子们&#xff0c;从今以后我们不再使用风靡一时的CentOS系统了&#xff0c;因为CentOS已经不在维护了&#xff0c;各大公司几乎也都从CentOS转入其他操作系统了&#xff1b;我们现在由原来的CentOS系统切换到最新的Ubuntu系统&a…

向日葵下载教程以及三款远程控制工具推荐!!!

向日葵远程控制下载教程&#xff01;&#xff01; 亲爱的朋友们&#xff0c;如果你对远程控制软件有所需求&#xff0c;那么向日葵绝对是一个不错的选择。现在我将带你走一遍向日葵的下载流程。 1. 打开你的浏览器&#xff0c;输入“向日葵官方网站”&#xff0c;进入官方网站…

力扣之1398.购买了产品A和产品B却没有购买产品C顾客

题目&#xff1a; Sql 建表语句&#xff1a; Create table If Not Exists Customers (customer_id int, customer_name varchar(30)) Create table If Not Exists Orders (order_id int, customer_id int, product_name varchar(30)) Truncate table Customers insert in…

前端求职简历-待补充

当然可以&#xff0c;针对大厂的前端岗位&#xff0c;一个吸引人的简历应该突出你的技术能力、项目经验、教育背景以及任何能体现你学习能力和团队协作能力的证明。以下是一个简历大纲示例&#xff0c;你可以根据自己的实际情况进行调整&#xff1a; 个人信息 姓名联系方式&a…

如何在算家云搭建SadTalker(数字人)

一、SadTalker简介 SadTalker 是一个基于深度学习的AI 数字人制作工具&#xff0c;可以通过对照片中的人物进行动态化处理,生成具有头部运动和面部表情的数字人。该模型通过接收一张图片和一段音频文件&#xff0c;能够自动生成包含人脸动作&#xff08;如张嘴、眨眼、移动头部…

comfyui工作流保姆级教程来啦(附整合包)!从入门到精通一文解决

一、SD主流 UI Stable Diffusion&#xff08;SD&#xff09;因为其开源特性&#xff0c;有着较高的受欢迎程度&#xff0c;并且基于SD的开源社区及教程、插件等&#xff0c;都是所有工具里最多的。基于SD&#xff0c;有不同的操作界面&#xff0c;可以理解为一个工具的不同客户…

网络编程(21)——通过beast库快速实现http服务器

目录 二十一、day21 1. 头文件和作用域重命名 2. reponse时调用的一些函数 3. http_connection a. 构造函数 b. start() c. process_request() d. create_response() e. create_post_response() f. write_response() 4. Server 5. 主函数 6. 测试 1&#xff09;测…

AOP 面向切面编程

1.准备工作&#xff0c;创建maven项目 1. pom.xml 加入依赖 <dependencies><!--spring核心坐标--><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>6.0.6</version&…