上节课我们简单介绍了一部分基础语法的内容,其实我们接下来将会有很大一部分内容是对基础语法的介绍,这节课呢我们也是介绍一下关于js语法中一项比较基础的内容——数据类型。

回顾

那么在开始这节课内容之前,我们先来对上节课的内容来做一个简单的回顾:

  • 在程序执行过程中计算机自动忽略注释和多余的空格和换行
  • js严格区分大小写。以一个英文格式的分号来标志一个语句结束。
  • 字面量是确切的不可变的值,变量的值是可变的,可以存储字面量
  • 通过变量名来使用变量,变量要先声明再使用,变量在声明时可以直接赋值
  • 变量声明时如果没有赋值,js会自动将undefined作为该变量的缺省值
  • 所有可以由我们自主命名的都是标识符,但是在命名时要遵循标识符命名规则

以上便是上节课的主要内容,这节课我们开始学习js中的数据类型。

数据类型概述

提到数据类型,我们首先要知道什么是数据?

数据(data)是事实或观察的结果,是对客观事物的逻辑归纳,是用于表示客观事物的未经加工的原始素材。数据可以是连续的值,比如声音、图像,称为模拟数据;也可以是离散的,如符号、文字,称为数字数据。

上面这段来自于百度百科,大家能明白是什么意思吗?是不是感觉很抽象?通俗地来说,我们对一个什么事物观察总结,得到了某个结果,这就可以称之为数据。比如我们看奥运会奖牌榜,我们可以得到什么信息?第一看到奖牌榜上有哪些国家获得了奖牌;看到了每个国家各获得了多少奖牌,看到了帮上哪个国家获得的金牌最多,或者哪个国家获得的银牌最多。这些都是数据。

或者说有记者在采访某个人,整个采访过程的录像,或者录音,再或者是拍的照片,这些都是形成一篇报道的原始素材,这些也都是数据。

所以说牵涉到数据,那么肯定就会有类型,为什么怎么说呢?上面举了这两个例子,我都知道这两个例子里的数据都是什么了,但是这些数据的性质一样吗?肯定是不一样的吧?我们看奖牌榜得到的数据可以是一张报表,可以是一段文字,记者采访得到的数据可以是录像,可以是照片也可以是录音,这些数据都是有各自的独特分类的。这些我们所谓的分类就是我们所说的数据类型。

那么在编程中也是存在数据和数据类型的。我们经过之前的课程中的案例来判断一下。

var a = 123;
console.log(a);

比如上面这段代码,是什么意思?是不是把 123 这个数字赋值给了变量a,那么 123 算不算数据呢?是不是算的,我们把这个数字赋值给了某个变量,那么我们后面的编码中可能会用到这个变量,并且参与到一系列的加工和处理中,有人要说,你这只是输出了一下这个变量叫什么加工和处理啊,我们来想一下,我们输出这个操作是不是就是对输出内容的一个处理,我对这个内容做了一个什么处理?我做了输出处理,所以说只要我们在声明了变量a之后并使用了该变量,那么就算是对其进行了处理。

既然对这个变量进行了处理,那么这里的这个变量的值属于什么?是不是我们在定义中所说的未经过加工的原始素材?那么这个变量的值就是数据,那么这个数据的类型是什么?是不是一种数字类型啊?

所以说这就是最简单的数据和数据类型的表现与解释。那么大家有没有注意到一个问题,这个数据是谁啊?是a变量吗?其实不是,我们把一个字面量存储到了变量里,实际上我们后续的处理都是对这个变量里存储的字面量做的处理对吧?我们之所以要声明一个变量来存储字面量目的就是为了能够更加方便地使用这个字面量,而变量本身不属于数据,变量中存储的值才是数据。所以说我们所说的数据类型,是不是就相当于我们这些字面量的类型?

当然一门编程语言想也知道不可能就只有一种数据类型。那么在js中的数据类型有哪些呢:

  • Number 数字类型
  • String 字符串类型
  • Boolean 布尔类型
  • Null 空值
  • Undefined 类型
  • Object 对象类型

js中有着上面这 6 中数据类型,大家看我每个类型的英文都是首字母大写,这是一个约定俗成的习惯,js中大家都会将数据类型的首字母大写来代表数据类型。

当然严格的来说上面这 6 种类型实际上是 5 种数据类型,其他 5 种我都写了什么什么类型,唯独Null我只写了这个是空值,但是没有说这是一个类型,因为Null型的数据其实是Object型,当然这个我们后续内容会介绍,这里就先简单提一下。

上面列出来这 6 种类型的前 5 种,我们称之为基本类型,而最后一个Object型是引用数据类型,我们在前期先介绍基本数据类型,至于Object型我们将在后面面向对象的时候再详细介绍。

在最后我们补充一点,就是js提供了一个操作符叫typeof,这个操作符可以用来检查一个变量的数据类型,比如我们有一个变量a,但是我们不知道这个变量的数据类型,我们直接console.log(typeof a);就可以输出这个变量的数据类型。

Number类型

Number类型我们也是不陌生了,数字呗,这个从我们小时候刚开始学会说话没多久,父母就在尝试教我们从 1 数到 10,然后随着年龄的增长,我们甚至渐渐学会了一些复杂的数字计算。在js中数字类型和我们打小开始接触的数字也没啥区别。就是普通的数字。

数字再细分,在计算机领域有两大类,整数和浮点数,整数我们都明白,但是什么是浮点数呢?我们来猜一下,通常数字我们分成两个大类的话,有整数,那么另一类就是非整数呗,那什么是非整数呢?小数,分数这都是非整数,但是计算机内存中是没法表示分数的,都会换算成小数来代替,那么这里的浮点数其实代表的就是小数。但是为什么不叫小数而叫浮点数呢?

这个内容不属于js范畴了,这要从数字在计算机内存中的存储机制说起了,其实整数也是有小数点的,只不过小数点右侧都为 0,而且小数点在内存中的位置是固定不变的。所以说整数又叫定点数,而小数和整数相反,小数的小数点在内存中是可以左右浮动的,所以说小数在计算机领域,大家都会根据其小数点可以在内存中左右浮动这一特点来称之为浮点数。至于为什么这么设计,大家感兴趣的话我可以单独抽一期介绍一下数字在内存中的存储方式,这里就不再赘述了。

既然我们对Number类型有一个整体了解了,那么我来讲几个点,第一jsNumber类型的数据有没有边界呢?换句话说,我们数数,从 1 一直不停地数,只要你足够无聊,数到 1 万,甚至 10 万都有可能,但是什么时候是个头呢?其实js中数字也是有一个上限的:

console.log(Number.MAX_VALUE);

我们来看这行代码,js中有一个内置的常量,就是Number.MAX_VALUE,我们都能看明白max value这个词组是什么意思,就是最大值的意思,这个常量其实就是js底层所能支持的最大数字上限,我们来看一下结果:

image-20220329134610757

我们看见控制台中输出了一串数字,大家明白是什么意思吗?这是科学计数法就是前面这串数字乘以 10 的 308 次方,这个数字就已经是js底层的上限了,通常来说这么大的数字足够我们用了。但是人总是有好奇心的,虽然这个数字很大了,但是总有比这个数字更大的数吧,那么如果我们想超过这个数字在js中会出现什么现象呢?

console.log(Number.MAX_VALUE * 2);

我们也不搞那么多幺蛾子了,我们就在这个最大的数的基础上翻一倍,这里先提前提一句,这个 * 号是乘法运算符,因为我们现在还没介绍到运算符,就先提一下。那肯定就超出上限了啊,我们看一下结果是什么样子:

image-20220329135413558

我们看见控制台中输出了一个词叫Infinity,这个单词翻译过来就是无穷,无限的意思在js中会用Infinity来表示正无穷,就是我们数学中的+∞-Infinity则表示负无穷就是-∞

而且还有一点要注意的是Infinity-Infinity都是字面量,而且这两个都是数字类型的数据,我们可以用typeof来检查一下:

image-20220329144112073

我们看到控制台输出了Infinity是个数字类型的数据,既然Infinity是字面量,那么我们可以直接将Infinity赋值给某个变量例如:

var a = Infinity;
var b = -Infinity;

我们可以直接像上面这段代码将Infinity或者-Infinity赋值给变量。

既然js中有Number.MAX_VALUE,那么有没有Number.MIN_VALUE的存在呢?当然是有的,但是大家来猜一下,Number.MIN_VALUE的值是多少呢?可能大家下意识就会猜这个值和-Number.MAX_VALUE的值相等,因为maxmin是一对反义词啊,既然MAX_VALUE代表上限,那么MIN_VALUE肯定是代表下限,但是是不是呢?我们来看一下结果:

image-20220329141310650

诶,不对,这和我们猜的不一样啊,首先数量级不对,另外一点这个数字压根就不是负数啊,其实呢这个值是js底层设置的一个大于 0 的最小值,有点类似于我们数学中的极限,我们在学习极限的时候写过无数次x->0,但是这个无限趋近于 0 的x到底是多少呢?那么js给了你答案,这个无限趋近于 0 的x就是我们这里的Number.MIN_VALUE

可能有人要问了,那么既然Number.MIN_VALUE不是js支持的数字下限,那么js中的数字下限怎么表示呢?想要表示下限,直接在Number.MAX_VALUE前面加一个负号是不是就能表示下限了?所以说没有必要再单独为了下限来再设置一个独立的内置常量。

这两个点讲完之后,其实数字类型里面还有一个点要注意,就是数字运算,虽然我们现在还没介绍到运算符,但是简单的举一个小例子:

console.log(0.1 + 0.2);

我们来看上面这行代码,这个即便我们没有介绍运算符应该也能看明白吧,就是在控制台上输出 0.1 加上 0.2 的结果。那么结果应该是多少呢?我们都知道从数学的范畴来说0.1 + 0.2 = 0.3,但是从计算机的范畴来说的话得到的结果是不是也为 0.3 呢?我们来看一下结果:

image-20220329142458663

这是什么鬼?首先可以确定的一点这个结果肯定不对,但是这个问题并不是js的问题,其实所有编程语言都会出现这种情况,只不过其他编程语言都有其他办法来解决,但是js并没有提供解决方案。但是这个问题只针对浮点数运算,整数运算基本不会出现这种情况。所以说js不能够进行对精度要求高的运算。

出了上面这些东西之外,Number类型的数据还有一个很特殊的存在

var a;
console.log(a * a);

我们来分析一下上面这一段代码,首先我们是不是声明了一个变量a?但是我们并没有给这个变量进行赋值。那么这个变量a的值是多少?是不是有一个缺省值为undefined?这个我们在前面的课程里面就已经提到过了。那么紧接着我们在控制台里面输出变量a的平方值。

那么这个值应该是多少呢?我们来看一下这个值的底层逻辑,是不是要在控制台中输出undefined * undefined的结果?但是这个结果是多少?是不是不知道啊?那么输出的结果是什么呢?

image-20220329143510725

我们来看一下:我们控制台中输出了一个NaN,这个是什么意思呢?这个东西是Not a Number的缩写,因为js底层也不知道undefined * undefined的结果是什么,但是唯一可以确定的一个是这个结果肯定不是一个数字。所以说就直接输出了代表不是数字的NaN出来。但是呢NaN的数据类型是数字类型:

image-20220329144303681

这就是NaN的特殊之处,这个东西本身是数字类型的数据,但是它却代表着自己不是一个数字。而且NaN也是一个字面量,可以直接拿来使用也可以赋值给某个变量。

以上就是Number类型的相关内容。

String类型

讲完了Number类型,接下来我们拉介绍另一个很常用的数据类型,就是String型,这个词如果直接从英文翻译出来的话,可能不容易和我们这个数据类型联系在一起,这个数据类型叫字符串。可能零基础的朋友看到这个词都表示一头雾水,什么叫字符串?

我么来类比一下,什么叫羊肉串?是不是一根签子把一块一块的羊肉串在一起就叫羊肉串?字符串也差不多?把一个个的字符串到一起就叫字符串,只不过字符串没有签子。那么什么是字符?实际上在js中已经没有字符的概念了。

字符,字面上来理解就是字和符,字可以包含汉字以及字母,符就简单了,就是符号的意思,把一些汉字或者字母或者符号串在一起形成的一个新的结构就叫字符串,在我们前面的课程中就已经见过字符串了。我们第一节课中的alert("Hello World");这行代码,我们来分析一下,我们说过alert()这是一个js内置的方法,用来让页面弹出一个警告窗口。而弹窗所展示的内容就我们这个括号里面的内容。

这里我们括号里的内容是"Hello World",这里这个"Hello World"就是一个字符串,我们来分析一下这个所谓的,我们迄今为止在这个js教程中见过的第一个字符串有什么特点?

第一点,我们是用一对双引号引起来的,其次这个双引号中的内容就是弹窗实际展示出来的内容,我们看到弹窗中展示的内容中并没有双引号。最后,这对双引号中可以写数字以外的字符,就目前来说我们只介绍过数字类型的数据,而字符串这对双引号之间可以写数字以外的字符。

以上就是我们从表面上所观察出来的信息。那么我们来介绍一下吧:

第一,js中字符串要用成对出现的单引号或者双引号括起来,为什么我们这里说要用成对的单引号或者双引号呢?

image-20220329150654117

我们来看图,图中我们不论用单引号还是双引号将hello这个词括起来,程序都正常在控制台输出了hello,所以说js中并没有严格要求字符串必须要用双引号还是单引号,我们字符串左侧的引号则标志着字符串的开始,右侧的引号是标志着字符串的结束的。当左侧的引号出现,就标志着这个引号右侧的内容全部为字符串的内容,直到遇到另一个与左侧引号相匹配的引号停止。右侧引号的出现意味着字符串内容到此为止,再右侧的内容就不属于这个字符串了。

但是看最后几行,我们左右两端分别用了不同的引号,结果程序就报错了,因为引号是成对匹配的,单引号只能和另一个单引号匹配,双引号也只能和另一个双引号匹配,所以说左右两端用的引号不匹配的话就会导致计算机无法理解代码的真实用意,从而出现语法错误。

其次,一个字符串中的实际内容是字符串两端引号之间的所有字符组成的结构,而不包含左右两端的引号,因为左右两端的引号仅仅只是作为字符串开始与结束的标志,而不计入字符串的内容。就好比我们吃一颗糖,这颗糖的外包装我们是不会吃的,这个外包装就类似于这里的引号,只有包装里面的才是糖。

至于我们说的好像这对引号之间我们可以写数字之外的字符,这个问题要稍微复杂一点,理论上一个字符串的内容可以包含任何字符,但是有几个特殊的点要注意。比如说这样:

 console.log("I said: "Hello!" just now");

首先从颜色上就已经看出来好像不太对劲了,我们看一下IDE里的效果:

image-20220329152333013

一道红色的波浪线,这代表着出现了语法错误。为什么会出现语法错误?我们前面怎么说的?左侧第一个引号标志着字符串内容开始,表示这个引号右侧内容都是字符串的内容,知道遇到另一个与左侧引号相匹配的引号停止,右侧引号出现意味着字符串内容结束,右侧引号右侧内容都不再是该字符串的内容。

那么我们来看上面这段字符串,左侧引号出现,字符串开始,然后在Hello之前遇到了另一个与左侧引号匹配的引号,字符串结束,那么Hello!这一段是不是就不是字符串里的内容了?那么这一段是什么?我也不知道是什么。在js中就没有这么个东西啊。所以肯定会报语法错误。

那么有人问了,如果我这里就是想在字符串里面用双引号怎么办?简单啊我们这样改一下就行了:

 console.log('I said: "Hello!" just now');

我们把两端本意是标志着字符串的开始与结束的引号都改成单引号是不是就行了?因为单引号开始了这个字符串,然后遇到双引号并不会匹配,直到遇到最右侧这个唯一的单引号才标志着字符串结束,那么这样的话字符串中的双引号就成为了字符串的内容了,而不再是字符串开始和结束的标志。根据我们分析这样应该是没有问题的。首先从颜色上来看好像是挺正常的,那么看一下IDE里的情况:

image-20220329153115206

好像也不报错了,那么实际代码执行是不是成功的呢?

image-20220329153203055

我们看到控制台中也正确输出了我们的字符串内容。所以我们得出一个结论,就是同一种引号不能够嵌套使用。

但是如果说有人说,我就是犟,我就要两端也用双引号,而且字符串内容也要出现双引号那么怎么办呢?当然这样我们要引入一个特殊字符叫做转义字符。我们会用一个\符号来表示转义开始那么在\后面的字符就会被转义。比如:

 console.log("I said: \"Hello!\" just now");

这样的话,我们从颜色上看好像也是 OK 的,我们来分析一下,左侧双引号开始字符串,到了Hello前面这个双引号,但是这个双引号被\给转义了,所以就不会和左侧的双引号匹配了,那么到了!右侧的双引号,这个双引号也被转义了,那也不会和左侧起始双引号匹配,知道到了右侧最后一个双引号,这个双引号没有被转义,那么就和左侧起始双引号匹配了,字符串结束,所以说这样的话也不会报错,我们来验证一下:

image-20220329154243730

首先IDE不报错,然后我们看一下执行结果:

image-20220329154316790

执行结果也是没有问题的,所以说我们可以通过转义字符来使得同一种引号可以一次或者多次出现在字符串内容中。

但是转义字符并不只是这一种,而且并不是说\就是转义字符,\只是标志着转义字符的开始而已我们常用的转义字符有:

  • \",代表一个"
  • \'代表一个'
  • \n代表换行
  • \t代表电脑键盘上的tab键,又叫制表符
  • \\代表一个\

以上就是我们字符串的基本内容

Boolean类型

其实Boolean类型是一个很简单的类型我们生活中也很常见的,比如说我突然说,楼下那个特别抠门的超市今天突然做活动,全场半价。大家听到这个消息第一反应是什么?是不是很震惊?然后马上就会问一句:啊?真的假的?

诶,这里的真的假的就是Boolean类型的数据,这个类型的数据就是用来表示一个真实性的问题,而这个类型的数据呢只有两个值,在计算机中也是很绝对,非真即假。所以Boolean类型的数据只有truefalse

通常来说呢Boolean类型的数据是用来做逻辑判断的,什么意思呢?就是当我们在遇到抉择的时候,我们并不能随便选一个啊,我们要有依据地做出抉择,比如说,我看看今天我微信钱包里面的零钱,如果超过 35 元钱,我就去吃个肯德基,否则我就去随便买个关东煮吃拉倒。但是我其实心里是期望能吃的上肯德基的。那么我们就会做一个假设,假设我微信钱包里面的钱超过了 35,那么我接下来判断我这个假设是否成立,成立那就是true,然后我就去吃肯德基了,如果假设不成立,哎呀我只有 10 块钱了,那我就去点个关东煮吃吧。这就叫做逻辑判断,而Boolean数据就是这个逻辑判断中的依据。

Null空值

其实我们的数据类型也就NumberString类型的内容要多一点,Boolean类型虽然也很常用,但是信息量着实不多,很简单。接下来呢我们介绍这个Null,这是一个比Boolean更简单的类型。

这个类型只有一个值就是null,那么这个类型的用途是什么呢?其实null只有一个用途,就是专门用来表示一个空对象,不知道大家还记不记得前文我说,我们列出了 6 种数据类型,但是实际上就只有 5 种,因为Null其实就是Object类型的一个特例。

这就是我说这句话的理由,因为null就是一个空对象,我们用typeof来检查一下null的类型:

image-20220329160402257

我们看见控制台中输出的null的类型其实就是一个Object类型,只不过null的用途单一且特殊,所以单独拿出来做了一个Null的分类,这个大家做一个了解就可以了。

Undefined类型

讲完了Null,现在终于到了我们最后一个基本数据类型了。就是Undefined,这个类型我们应该不陌生了,我们在前面的内容已经见过好几次了。当然了这个类型的值也只有一个,大家猜猜是什么?没错那就是undefined,哎呀,没想到谜底就在谜面上。

undefined的用途其实也很单一,因为这个东西就代表一个未定义的值,那么这个东西又在什么时候会用到呢?基本上来说我们很少会主动用到这个东西,就目前来说我们所知道的是当我们声明一个变量但是没有赋值的时候,这个变量的缺省值就是一个undefined。当然后续的学习中也还会再遇到其他出现undefined的情况,等我们遇到了再说明,这里就不再赘述了,因为大家还没有足够的基础知识储备,说太多不利于理解。

总结

  • js有 6 种数据类型
    • Number 数字类型
    • String 字符串类型
    • Boolean 布尔类型
    • Null 空值
    • Undefined 类型
    • Object 对象类型
  • 其中前 5 种为基本数据类型,最后一种为引用数据类型
  • Number类型分为整数和浮点数
  • String类型就是字符串,就是由一个个字符组成并用成对的引号括起来的数据结构
    • 字符串必须要由同一种成对的引号括起来
    • 字符串中同一种引号不能嵌套使用
    • 字符串可以用转义的方法让同种引号多次出现在字符串内容中
  • Boolean类型只有两个值truefalse
  • Boolean类型用于做逻辑判断
  • Null值只有一个值就是null
  • null的类型其实是Object
  • null专门用来表示一个空对象
  • Undefined类型只有一个值,就是undefined

Copyright statement:The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article:https://work.lynchow.com/article/js_basic_grammar_2/