打开网易新闻 查看更多图片

前端的开发当中,我们经常听到的两个概念就是JavaScript和ECMAScript,其实很多人大都是将两个概念视为相同的,但是其实JavaScript的实现要远远大于ECMAScript,ECMAScript仅仅是作为JavaScript的核心部分,JavaScript还包含两块重要的内容就是文档对象模型(DOM)和浏览器对象模型(BOM),DOMBOM其实也是前端技术非常重要的一块内容。

打开网易新闻 查看更多图片

了解这些以后,我们下面开始讲解JavaScript语言最基本的概念,毕竟这也是学习任意一门语言首要掌握的“敲门砖”,俗话说“万丈高楼平地起”未来你的JavaScript能够走到什么样的高度也完全取决于你对这些基本类型以及API的掌握程度!也能解答你最初认为JavaScript“杂乱无章”的困惑,掌握这些基本概念之后,你会发现并爱上JavaScript这门语言!

语法

  1. 首先JavaScript虽然是一门弱类型语言,但是内部的一切命名都是完全区分大小写的,比如变量Test、TEst、test表示三种不同的变量。
  2. JavaScript的标识符命名规则和其他语言一样,首字母必须为字母、数字、下划线(_)、美元符号($)开头
  3. 注释采用C语言风格,单行注释采用“// 注释内容”,多行注释采用“/* 注释内容 */”。
  4. 条件控制语句、循环语句与大多数语言相同,此处不再赘述!

很多人觉得JavaScript杂乱无章,甚至没有章法可循就是因为对于JavaScript的基本类型并没有深入的了解,同时JavaScript因为是松散型的变量,变量仅仅是作为一个占位符能够被赋予任何类型的值,这导致很多人认为自己“怎么写都对,怎么都能运行”的概念,就盲目地认为JavaScript其实很简单,今天我们一起来深入看一下JavaScript的六大基本数据类型,扫清初学者的所有“困惑”,让你开启全新的JavaScript之旅!

接下来,我们将进入本届课的重点内容,6大基本数据类型的刨根问底!

六大基本数据类型

在JavaScript这门语言当中有6大基本数据类型:5种简单数据类型+1种复杂数据类型。

5种简单数据类型:undefinednull、布尔类型(Boolean)、字符串类型(String)、数值类型(Number

1种复杂数据类型:对象类型(Object

那么其实在ES6标准当中,JavaScript又新增了一个原始基本类型:Symbol类型,表示一个独一无二的值,Symbol类型的出现主要是为了解决我们在为对象增加方法以及属性时导致同名属性或者同名方法被覆盖而新增的

因为JavaScript是松散类型的,变量仅仅是一个占位符,那么当我们给变量赋值后,如何正确地获得该变量的类型然后再做相应的处理就成为一个棘手的问题,其实JavaScript是提供给我们一个typeof操作符来获取变量类型的,不过留一个问题就是typeof真的能够帮助我们准确的判断类型吗?这个知识点其实也是检测你对JavaScript的掌握程度的一个关键点。

typeof 操作符

我们首先来看一下各个基本类型使用typeof操作符返回的值:

打开网易新闻 查看更多图片

如上图,我们可以看到typeof操作符是无法区分nullObject类型,也无法区分复合类型(Arrary)与 函数类型(Function),所以这个操作符在检测类型的时候是有缺陷的,那么我们如何准确的检测出类型呢?

这儿给出一个普遍JS类库都采用的方式比如(JQuery),就是调用Object原型链上的toString方法,如下图:

打开网易新闻 查看更多图片

我们可以看到,JavaScript目前所有的类型都能够通过这种方式准确的检测出来,那么这儿有一个知识点就是必须调用Object原型链上的toString方法通过call方法将this对象变成检测的变量,这样变量就会调用Object原型链上的toString方法,而非变量所属基本类型覆盖重写后的toStirng方法。

知道上面如何检测变量类型之后,我们来学习几个比较重要的类型转换规则:BooleanNumber

Boolean类型转换规则

可以说Boolean类型在JavaScript中是使用的最多的一种类型,该类型只有truefalse两个值。在条件语句中任何传入的类型都将被转换为Boolean类型,来判断其该走哪个条件分支,这时候就涉及到其他基本类型到Boolean类型的转换,它们的转换规则如下:

打开网易新闻 查看更多图片

这个转换规则我们需要牢记,对我们以后书写判断条件以及阅读一些JS类库非常有帮助,也不再会对JavaScript的判断条件产生困惑了。

Number类型转换规则

JavaScript的Number类型是采用的IEEE754格式标准,这个标准有一个浮点计算的通病,那就是在做条件判断的时候永远不要用与浮点计算的数值相比较,来看一个具体的例子:

  • console.log(0.1+0.2); // 输出多少?

如果你单纯的认为输出0.3,那么你就错了,这是JS浮点计算中的一个特例,其输出0.30000000000000004,所以当你执行以下判断时,你永远不会得到正确的结果:

  • if(a + b == 0.3){ // 切记不要做这样的条件判断
  • // do sth.
  • }else{
  • // do else sth.
  • }

知道这个知识点之后,我们再看其他基本类型转换到 Number 类型有三种方式,一种是通过Number()函数,另一个是全局函数parseInt()和parseFloat(),当然了 Number() 函数能够将任何基本类型转换为 Number 类型,后两个仅仅是针对字符串转换成 Number 类型,这块的转换规则也比较重要,需要谨记!

Number() 函数的转换规则如下:

打开网易新闻 查看更多图片

可以看出Number() 函数对String字符串进行转换的时候并不是很合理,所以我们常用的其实是全局函数parseInt() 函数,该函数的转换规则更加合理,parseInt() 的解析规则是忽略掉字符串的前置空格,直到找到第一个非空字符,如果不是数字或者负号,直接返回NaN,如果是数字或者负号,继续往下找,一直到没有数字字符为止,将前面解析到的数字提取出来。

而parseInt函数与Number函数的另一个区别是能够解析进制,虽然如此,但是我们应该坚持在使用parseInt()函数的时候始终指定第二个参数(代表进制)。

最后一种Object类型,则是先调用Object类型的valueOf() 方法,得到返回值,然后返回值按照上图的规则进行转换,若结果返回 NaN ,再次调用其 toString() 方法得到返回值再按照上图的转换规则进行转换,最后String类型种若有非数字字符,一律转换为 NaN 。

Undefined类型

Unfefined类型还是比较简单明了的,只有一个取值为undefined,比如声明了一个变量但未对其进行初始化,那么该变量默认被赋值为undefined。一般来说字面量undefined通常被拿来进行比较判断。

Null类型

如同Undefined类型一样,Null类型也仅有一个字面量为null,但是Null类型在进行typeof操作符的时候返回是“object”,其实null就是一个空对象指针。

所以其实如果我们的变量将来如果要存放对象类型的话,初始化的时候最好显示的赋值为null。

这儿其实有一个知识点就是null == undefined 比较返回的是true,这是因为两者在进行判等的时候都进行了类型转换,规则按照前面的Boolean类型的转换规则,所以都会被转换为false,所以两者判等返回的是true。

String类型

String类型可以说在JS开发当中算是比较常用的类型,那么JS的字符串可以用双引号或者单引号引用起来,都是有效的,单引号双引号也是可以嵌套使用的,比如“

或者'

。不过在ES6当中也为我们增加了一个模板字符串`this is a string`,这个模板字符串非常好用,对于拼接字符串来说再也不用“+”号来连接,只需要使用模板字符串直接抒写然后添加变量。

例子:

  • var number=6;
  • console.log(`打印数字:${number}`);

运行输出:打印数字:6

其实String类型当中有很多内置的方法,这儿就不再细说,读者可以查阅相关API仔细理解一下,比如最常用的substr()、splice()、split()、replace()方法。

Object类型

Object类型的初始化有两种方式:

  • var obj = new Object();
  • var obj = {}; // 字面量创建Object对象

Object类型创建完成后就可以为其添加各种属性或者方法,都会存在于其原型链上,以上就是我们需要知道的5大基本类型的相关重点内容,这儿我们也引出了原型链这一概念,原型链在JS当中也是非常重要的,我们将会在下一节内容中详解讲解。

打开网易新闻 查看更多图片