【JavaScript】基本语法大全

news/2024/4/20 3:59:29/文章来源:https://blog.csdn.net/weixin_64916311/article/details/129136028

前言:

大家好,我是程序猿爱打拳。在学习C和Java这样的后端编程语言后,我们大概率会学习一些关于前端的语言如HTMLJavaScript。又因为前后端基本语法有些许不同,因此我整理出来。今天给大家讲解的是JS中的数据类型、运算符、选择结构、循环结构。


目录

1.变量与常量

1.1什么是变量?

1.2变量的命名规范

1.3什么是常量?

2.数据类型

2.1常用基本数据类型

2.1.1布尔型

2.1.2数字型

2.1.3字符串型

2.1.4空型

2.1.5未定义型

2.2数据类型检测 

3.运算符

3.1算术运算符

3.2字符串运算符

3.3赋值运算符

3.4比较运算符

3.5逻辑运算符

3.6三元运算符

3.9练习-计算圆的的周长和面积

4. 流程控制

4.1选择结构

4.2循环结构

4.3跳转语句


1.变量与常量

1.1什么是变量?

变量相信大家在C语言或Java阶段已经了解到了是什么意思,变量就是可以发生改变的量。如在一个旅馆里今天我可以住房间1,明天我也可以住房间2,这是可以发生改变的。此时,房间1和房间2就是变量值,而我就是变量名。


1.2变量的命名规范

  • 不能以数字开头,且变量名中不得含有运算符,如8a、8-a、8+a。
  • 大小写敏感,如it不等于IT。
  • 不能使用JS中的关键字,如var。

为了,提高变量名的可读性,我们一般使用容易让人识别的名字来命名。如一个数字我们可以用num来命名,一个价格我们用price来命名。当多个单词聚集时,我们使用驼峰式命名规范,如numPrice,也就是第一单词首字母小写,第二个单词及以后每个单词首字母大写。

//以下为合法变量名
num
price
$firstPrice
//以下为不合法变量名
66num
6-price
var
&num


在JavaScript中,无论什么类型的变量我们都用var修饰。并不像C语言、Java那样有专门的数据类型标识,一个var修饰所有。如以下几组:

		<script >var num=20;var ch1='A';var ch2='帅';var str='ABC';var flag1=true;var flag2=false;console.log(num,ch1,ch2,str,flag1,flag2);</script>

控制台显示:


1.3什么是常量?

常量在我们编程语言中,我们认为是无法改变的量。例如生活中,父亲永远是你的父亲,这是无法改变的事实。在Javascript中,常量我们用const关键字来修饰。

如我要定义一个常量并且修改这个常量:

		<script >const num=10;num=20;console.log(num);</script>

控制台显示:

我们可以看到控制台显示错误,说明被const定义的值是不可修改的,这就是常量的定义方式。 


2.数据类型

通过上方的学习,我们知道了。JavaScript中所有的类型都是用var这个关键字来修饰。但是,实际中JavaScript中也是有类型区分的。如下表所示:


2.1常用基本数据类型

2.1.1布尔型

在生活中表示一件事物有两种情况,第一种真第二种假。在JS中布尔型对应的就是truefalse,主要用于逻辑判断。以下为两种情况演示:

		<script >var flag1=true;var flag2=false;console.log(flag1,flag2);</script>

控制台显示:

上述代码,将flag1初始化为true,flag2初始化为false。


2.1.2数字型

数字型又分为整型浮点型,在JavaScript中表示数字的形式是和C、Java中一致的。在数字的前面加上'+'号或者不加代表这个数为正数,在数字的前面加上'-'号则代表这个数为负数。

(1)整型

使用整型时候,我们可以表示出八进制、十进制、十六进制:
 

		<script >var num1=20;//十进制20var num2=016;//八进制16var num3=0x32;//十六进制32console.log(num1,num2,num3);</script>

控制台显示:

上述程序,分别把十进制20赋值给num1,八进制16赋值给num2,十六进制赋值给num3。在此注意的是:

  • 十进制不用加任何符号。
  • 八进制前面加0(零)。
  • 十六进制前面加0x(零x)。

(2)浮点型

浮点型也就是小数,我们可以正常定义小数也可以使用科学计数法的格式来表示:

		<script >//正常定义var fnum1=3.14;var fnum2=-3.14;//科学计数法var fnum3=3.14E6;var fnum4=4.16E-4;console.log(fnum1,fnum2,fnum3,fnum4);</script>

控制台显示:

上述程序,分别用正常定义法和科学计数法定义一些浮点数,相信大家不难理解。

当然我们使用数字型时候,这些数据的范围是多少呢?JS中有专门求整型范围的:

		<script >console.log(Number.MIN_VALUE);//最小值console.log(Number.MAX_VALUE);//最大值</script>

控制台显示:

我们得出了数字型的范围为:5e-324~1.7976931348623157e+308。


2.1.3字符串型

字符串是计算机中用于表示一段文本的,在JavaScript中我们把字符串使用单引号''双引号""括起来。如下以下程序:

		<script >//单引号var str1='ABC';var str2='我蛮帅';//双引号var str3="abc";var str4="你蛮美";console.log(str1,str2,str3,str4);</script>

控制台显示:

以上代码,展示了用单引号和双引号来初始化字符串的方式。当然,我们也可以单引号和双引号同时使用:

		<script >var str1="red is'color'";console.log(str1);var str2='green is"color"';console.log(str2);var str3='I\'m boy';console.log(str3);var str4="\"Tom\"";console.log(str4);</script>

控制台显示:

上述代码分别展示了双引号内嵌入单引号,单引号内嵌入双引号以及使用\(反斜杠)来转义单引号和双引号为普通符号的方法。

JavaScript中常用的转义字符对应下表:

转义字符含义
\'一个单引号
\"一个双引号
\n换行符
\t水平制表符
\f换页符
\b退格符
\v垂直制表符
\r回车符
\\反斜杠
\0空字符

2.1.4空型

空型是一个特殊类型它为null,表示变量未有任何的值或对象:

		<script >var a=null;console.log(a);</script>

控制台打印:

上述代码,展示了null。比较简单,唯一要注意的是JS中大小写敏感,null不能写成NULL。


2.1.5未定义型

未定义类型只有一个特殊的值那就是undefined,当你未初始化值时,此时的值就是undefined:

		<script >var num;console.log(num);</script>

控制台显示:


2.2数据类型检测 

在外面开发过程中,难免会要进行相应同类型的数据匹配。JavaScript中提供了typeof操作符,当不确定一些数据类型是否相同类型时可以使用该操作符。

		<script >var num;console.log(typeof 2);console.log(typeof 'A');console.log(typeof true);console.log(typeof null);console.log(typeof undefined);console.log(typeof num);</script>

控制台显示:

以上代码展示了typeof操作符的作用。


3.运算符

在我们开发过程中需要对一些数据进行运算,因此JavaScript提供了很多类型的运算符,有专门用来进行算术的有特定逻辑操作的等等,下面我就来一一介绍。


3.1算术运算符

JavaScript常用的算术运算符表:

运算符运算例子结果
+加法5+510
-减法6-42
*乘法3*6

18

/除法6/32
%取模(求余)6%51
**幂运算3**29
++自增(前置)a=2;b=++a;a=3;b=3;
++自增(后置)a=2;b=a++;a=3;b=2;
--自减(前置)a=5;b=--a;a=4;b=4;
--自减(后置)a=5;b=a--;a=4;b=6;

上表中各个运算符的计算较简单唯一难点在自增和自减,当我们的符号放在前面时候先自增或自减,符号放在后面时先使用后自增或自减。我们来一组程序来理解:

		<script >var a=20;var b=20;var c=30;var d=30;//自增console.log(++a);console.log(b++);//自减console.log(--c);console.log(d--);</script>

控制台显示:

通过上述代码,我们可以感受到当符号放在前面时先进行自增或自减后再使用,而当符号放在后面时先进行使用再进行自增或自减。 


3.2字符串运算符

在我们写代码的时候,假设你定义了两个变量,当年你要把这两个变量连接到一起的时候。这时候就会用到一个+号,这是JavaScript中的字符串连接符。例如以下代码:

		<script >var name='拳击哥';var sex='男';var age='18';var str=name+sex+18;console.log(str);</script>

控制台显示:

以上代码,展示了+号连接三个字符串。并且连接后的字符串能以一整个字符串的形式赋值给一个变量。


3.3赋值运算符

赋值运算符表如下:

运算符运算示例结果
=赋值a=3;a=3;
+=加并且赋值、字符串拼接赋值a=3,a+=2;b='abc',b+='def';a=5;b=abcdef;
-=减并且赋值a=3,b=2;a-=b;a=1,b=2;
*=乘以并且赋值a=3,b=2;a*=b;a=6;b=2;
/=除以并且赋值a=3,b=2;a/=b;a=1.5;b=2
%=取模并且赋值a=3,b=2;a%=b;a=1;b=2;
**=幂运算并且赋值a=3;a**=2;a=9;

我们来结合代码来理解:

	<script >var num=4;num+=1;console.log(num);//num=5num-=1;console.log(num);//num=4num*=2;console.log(num);//num=8num/=2;console.log(num);//num=4num%=3;console.log(num);//num=1num**=2;console.log(num);//num=1</script>

控制台显示:

以上代码中,我拿出第一个num+=1来解释,num+=1等同于num=num+1。那么知道这一个的形式,其余的也就不难理解了。


3.4比较运算符

比较运算符一般用在判断语句里面也就是if语句里面用于两个数据的比较,比较运算符如下表所示:

运算符运算例子结果
>大于5>4true
<小于2<1false
>=大于等于5>=3true
<=小于等于5<=4false
==等于3==4false
!=不等于3!=2true
===全等3===3true
!==不全等3!==3false

我们来看一组代码:

	<script >console.log(12>=12);console.log(12=='12');console.log(12 === '12');</script>

控制台显示:

上述代码的第一行我们应该不难理解,第二行代码进行比较的时候浏览器会将字符串12也就是'12'转换成数字12从而得到结果为true,第三行代码是数字12和字符串'12'相比较因此结果为false。


3.5逻辑运算符

逻辑运算符如下表:

运算符运算例子结果
&&a&&b

当a与b中有一方为false则整个表达式为false

||a||b当a与b中有一方为true则整个表达式为true
!!a当a为false时!a为true,为true时!a为false

 我们来看一组代码:

	<script >var a=10;var b=5;console.log(a>b && b>a);console.log(a>b || b>a);</script>

窗口显示:


3.6三元运算符

格式为:表达1?表达式2:表达式3

  • 表达1可以是比较如>、<、=,但表达式1最后得到的结果是true或false也就是布尔类型。
  • ?是起一个判断作用,判断表达式1是true还是false。
  • :号是选择,如果表达式1是true就执行表达式2否则为false执行表达式3

 我们来看一组代码:

	<script >var age=16;var str=age>=18?'成年':'未成年';console.log(str);</script>

窗口显示:


3.9练习-计算圆的的周长和面积

	<script >var r=prompt("请输入圆的半径");r=parseFloat(r);var c=2*3.14*r;var s=3.14*r*r;console.log("圆的周长为:"+c.toFixed(2));console.log("圆的面积为:"+s.toFixed(2));</script>

输入3结果为:

以上代码中, toFixed()方法的作用是保留几位小数。比如你要保留2位小数你就toFixed(2)。


4. 流程控制

相信大家都学过学过C语言了,学过C语言后流程控制就不难理解了。流程控制分别通过顺序结构选择结构循环结构。三种结构来实现,顺序结构就是代码从上往下依次执行,选择结构和循环结构下面我来讲解。


4.1选择结构

选择结构就是根据条件来判断该部分的代码是否执行,判断的条件由开发者设定。常用的选择结构分为四种:if(单分支)if..else(双分支)if...elseif...(多分支)switch

(1)if语句

if语句为单分支语句,我们可以认为如果满足条件就执行if后面代码。

		<script >var age=18;if(age>=18) {console.log("成年人");}</script>

控制台显示:

(2)if...else语句

if...else语句我们称为双分支语句,我们理解为如果满足条件就执行if后面代码否则执行else后面代码。

		<script >var age=15;if(age>=18) {console.log("成年人");}else {console.log("未成年");}</script>

控制台显示:

(3)if...elseif...else语句

if...elseif...else语句也为多分支语句。多分支语句也就是有多个条件,我们可以这样理解如果满足第一个条件就执行if后面代码,否则如果满足第二个条件就执行elseif后面代码,否则执行else后面代码。这是满足三个条件时的判断,多个条件多个elseif。

		<script >var price=60;if(price<60) {console.log("便宜");}else if(price==60) {console.log("合适");}else {console.log("昂贵");}</script>

控制台显示:

(4)switch语句

  • switch(表达式)中的表达式必须是整形
  • case 常量表达式,case后的常量表达式必须与switch(表达式)中的表达式保持同一类型
  • 每个case最后面不一定都要加break
  • 当case 后常量表达式不满足switch中表达式内容则执行default后面的语句
  • switch中只能出现一个default语句,default语句可以放在任意一行
  • char也属于整形,因为他在计算机中也有自己的ASCLL码
     

在满足以上条件后,我们就能知道了switch语句的注意事项和定义方式,如我要写一段程序输入一个数字输出对应的星期日提示:

		<script >key = parseInt(prompt("请输入一个数字"));switch(key) {case 1:console.log("Today is Monday");break;case 2:console.log("Today is Tuesday");break;case 3:console.log("Today is Wednesday");break;case 4:console.log("Today is Thursday");break;case 5:console.log("Today is Friday");break;case 6:console.log("Today is Saturday");break;case 7:console.log("Today is Sunday");break;default:console.log("请输入正确的数字");break;}</script>

控制台显示:

以上程序展示了switch语句选择结构的特性,你输入一个什么数,case就执行什么对象。


4.2循环结构

(1)for语句

for语句跟C语言里面的for语句语法是一致的,for语句里面一般都有三个表达式。第一个表达式为初始化,第二个表达式为判断条件,第三个表达式为自增或自减步长。例如求1到10的和:

		<script >var sum = 0;for(var i=1;i<=10;i++){sum+=i;}console.log(sum);</script>

控制台显示:

以上程序中var i =1为第一条表达式,i<=10为第二条表达式,i++为第三条表达式,展示了for语句的特性就是用来循环执行某同一条件的。


(2)while语句

while语句跟for语句差得不多,唯一有一点不同是的。for语句的三个表达式是在()里面,而while语句中表达式1的初始化放在了整个while语句的外面,表达式2放在了while()里面,表达式3放在了while的{}里面。还是求1到10的和:

		<script >var i = 1;var sum = 0;while(i<=10){sum+=i;i++}console.log(sum);</script>

控制台显示为:

以上程序展示了while语句和for语句的不同之处也就是表达式的位置,但两个语句的功能几乎一致。


(3)dowhile语句

dowhile语句,是先执行代码后进行判断,为何这样说呢我们来看一组代码:

		<script >var i = 1;var sum = 0;do{sum+=i;i++;}while(i<=10);console.log(sum);</script>

窗口显示:

上述代码我们可以看,do{}里面的内容先执行了,最后再判断while()里面的内容。因此我们认为dowhile是先执行后判断语句。


4.3跳转语句

跳转语句分为两种continue语句break语句,相信学过C的朋友已经知道了这两个语句的用法。不知道的朋友下面我会讲解。

(1)continue语句

continue语句意为退出本次循环后整个循环继续运行,我们来看一个代码来理解:

		<script >for(var i=0;i<10;i++) {if(i==5) {continue;}console.log(i)}</script>

控制台显示:

上述代码,我们在for循环中加上一个判断语句来实现了continue语句的一个退出本次循环的效果。可以看到控制台中输出数字时跳过了5。


(2)break语句

break语句意为退出整个循环:

		<script >for(var i=0;i<10;i++) {if(i==5) {break;}console.log(i)}</script>

控制台显示:

上述程序,我们在判断语句后加入了break,整个循环结束了。只输出了0~4,因此证实了break是退出整个循环的语句。


本篇博客到这里就结束了,感谢您的阅读,如有收获还请关注一波🌹

Never Give Up

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

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

相关文章

【华为OD机试模拟题】用 C++ 实现 - 最低位排序(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 货币单位换算(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 选座位(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 停车场最大距离(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 重组字符串(2023.Q1) 【华为OD机试模…

Eth-trunk :LACP模式链路聚合实战

Eth-trunk : LACP模式链路聚合实战 需求描述 PC1和PC3数据vlan10 &#xff0c;网段为192.168.10.0 /24PC2和PC4数据vlan20 &#xff0c;网段为192.168.20.0 /24确保设备之间互联互通&#xff0c;使用最大互联带宽并没有环路确保相同网段的PC可以互通判断交换机之间的每个端口…

ros下用kinectv2运行orbslam2

目录 前提 创建工作空间 orbslam2源码配置、测试&#xff1a; 配置usb_cam ROS功能包 配置kinect 前提 vim 、 cmake 、 git 、 gcc 、 g 这些一般都装了 主要是Pangolin 、 OpenCV 、 Eigen的安装 18.04建议Pangolin0.5 创建工作空间 我们在主目录下创建一个catkin_…

Node 10.0.8.6:9003 is unknown to cluster

解决方案解决方案一解决方案一 ① 概念介绍 公网ip&#xff1a;就是任意两台连接了互联网的电脑可以互相ping ip,能够通的ip 内网ip&#xff1a;只是在内网中使用无法与外网连接的ip ②问题背景 在腾讯云上搭建的一个redis集群&#xff0c;集群启动后 可以看到启动节点…

TX Text Control .NET Server for ASP.NET 31.0 SP2 CRK

用于 ASP.NET 31.0 SP2 的 TX 文本控件 .NET 服务器 用于 ASP.NET 的 TX 文本控件 .NET 服务器 TX Text Control Server for ASP.NET 是用于 Web 应用程序或服务的服务器端组件。它是一个完全可编程的 ASP.NET 文字处理器引擎&#xff0c;提供了广泛的文字处理功能。使用 TX Te…

C++中的内存管理

文章目录前言1.C中内存空间的划分2.C内存管理方式1.对内置类型的处理2.对自定义类型的处理3.new和delete实现原理4.定位new3.总结1. malloc/free和new/delete的区别2. 内存泄漏前言 C中的内存空间划分和C语言是很像的&#xff0c;基本上区别不大。但是因C中&#xff0c;引入了…

davis2016评估教程

DAVIS 2016是VOS任务中的一个经典的benchmark&#xff0c;但是一些VOT的算法有时候也可以预测mask&#xff0c;所以也会在上面测一测性能&#xff0c;本次就随手记录一下自己评测的过程&#xff0c;有需要的小伙伴可以往下看。 DAVIS 2016数据集官方项目网站&#xff1a;https:…

TCP四次挥手

TCP 四次挥手过程是怎样的&#xff1f; TCP 断开连接是通过四次挥手方式。 双方都可以主动断开连接&#xff0c;断开连接后主机中的「资源」将被释放&#xff0c;四次挥手的过程如下图&#xff1a; 客户端打算关闭连接&#xff0c;此时会发送一个 TCP 首部 FIN 标志位被置为 1…

node报错

记录bug:运行 npx -p storybook/cli sb init 时报错gyp info spawn C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\MSBuild.exegyp info spawn args [gyp info spawn args build/binding.sln,gyp info spawn args /nologo,gyp info spawn args…

prometheus + alterManager + 飞书通知,实现服务宕机监控告警;实测可用

架构设计图 最终效果图 项目准备 xml依赖 <!-- 监控相关 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency><dependency><groupId>io.…

消息队列--Kafka

Kafka简介集群部署配置Kafka测试Kafka1.Kafka简介 数据缓冲队列。同时提高了可扩展性。具有峰值处理能力&#xff0c;使用消息队列能够使关键组件顶住突发的访问压力&#xff0c;而不会因为突发的超负荷的请求而完全崩溃。 Kafka是一个分布式、支持分区的&#xff08;partition…

JAVA 8 新特性 Lamdba表达式

Java8 新特性&#xff1a; 1、Lamdba表达式 2、函数式接口 3、方法引用和构造引用 4、Stream API 5、接口中的默认方法和静态方法 6、新时间日期API 7、Optional 8、其他特性 Java8 优势&#xff1a;速度快、代码更少&#xff08;增加了新的语法 Lambda 表达式&#xff09;、强…

Android 架构 MVC MVP MVVM,这一波你应该了然于心

MVC&#xff0c;MVP和MVVM是软件比较常用的三种软件架构&#xff0c;这三种架构的目的都是分离&#xff0c;避免将过多的逻辑全部堆积在一个类中。在Android中&#xff0c;Activity中既有UI的相关处理逻辑&#xff0c;又有数据获取逻辑&#xff0c;从而导致Activity逻辑复杂不单…

Wireshark抓包

Wireshark 1 抓包时间显示格式 2 界面显示列设置 3 protocol协议解析 4 过滤器 tcp.port&#xff1a;TCP端口tcp.dstport&#xff1a;TCP目的端口tcp.srcport&#xff1a;TCP源端口udp.port&#xff1a;UDP端口udp.dstport&#xff1a;UDP目的端口udp.srcport&#xff1a;UDP…

月薪过3W的软件测试工程师,都是怎么做到的?

对任何职业而言&#xff0c;薪资始终都会是众多追求的重要部分。前几年的软件测试行业还是一个风口&#xff0c;随着不断地转行人员以及毕业的大学生疯狂地涌入软件测试行业&#xff0c;目前软件测试行业“缺口”已经基本饱和。当然&#xff0c;我说的是最基础的功能测试的岗位…

良许也成为砖家啦~

大家好&#xff0c;我是良许。 没错&#xff0c;良许成为砖家啦&#xff0c;绝不是口嗨&#xff0c;有图有真相&#xff01; 有人会说&#xff0c;咦&#xff0c;这明明是严宇啊&#xff0c;跟你良许有啥关系&#xff1f; 额。。老读者应该知道良许的来历—— 鄙人真名严宇&a…

Python-datetime、time包常用功能汇总

目录基础知识时间格式有哪些&#xff1f;Python中的时间格式化时间戳datetimedatedatetimetimedeltatime常用获取今天凌晨字符串&#xff1f;将一个时间格式的字符串转为时间戳将一个时间戳转为指定格式的字符串全部代码参考基础知识 时间格式有哪些&#xff1f; 「格林威治标…

最新OpenMVG编译安装与逐命令运行增量式和全局式SfM教程

openmvg是一个轻便的可以逐步运行的SfM开源库&#xff0c;它同时实现了增量式和全局式两种算法。 说明文档地址&#xff1a;https://openmvg.readthedocs.io/en/latest/ github主页地址&#xff1a;https://github.com/openMVG/openMVG 1 编译安装 openmvg的安装比较简单&…

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Feb 2023)

Windows 11, version 22H2&#xff0c;2023 年 2 月 更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-11/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org 全新推出 Windows 11 全新 Windows 体验&#x…

论坛项目小程序和h5登录

项目中安装uview出现npm安装uview 直接报错&#xff1a;创建一个package.json配置文件在进行安装。cmd到项目。初始化一个package.json文件&#xff08;vue项目的配置文件&#xff09; npm init --yes 安装uview项目点击关注进入管页面&#xff0c;需要验证用户是否登录查用户是…