JS做类型检测到底有几种方法?看完本文就知道了!

JS有很多数据类型,对于不同数据类型的识别和相互转换也是面试中的一个常考点,本文主要讲的就是类型转换和类型检测

数据类型

JS中的数据类型主要分为两大类:原始类型(值类型)和引用类型。常见的数据类型如下图所示:

image-20200506103537269

原始数据类型存在栈中,引用类型在栈中存的是一个引用地址,这个地址指向的是堆中的一个数据对象。需要注意的是null在这里我们算在原始类型里面,但是你用typeof的时候会发现他是object,原因是就算他是一个对象,那他应该在栈中存一个引用地址,但是他是一个空对象,所以这个地址为空,也就是不对应堆中的任意一个数据,他在堆中没有数据,只存在于栈中,所以这里算为了原始类型。引用类型其实主要就是Object,Array和Function这些其实也都是Object派生出来的。关于这两种类型在内存中的更详细的知识可以看这篇文章。

image-20200506104330145

下面我们来看看这两种类型的区别:

原始类型

原始类型的值无法更改,要更改只能重新赋值。像下面这样尝试去修改是不行的,但是整个重新赋值可以。

image-20200506104958681

image-20200506105044457

原始类型的比较就是比较值,值相等,他们就相等

引用类型

引用类型的值是可以修改的,注意这个时候我们虽然修改了a里面的属性,但是a在栈上的引用地址并没有变化,变化的是堆中的数据。

image-20200506105513907

引用类型的比较是比较他们的索引地址,而不是他们的值。比如下面两个对象,看着是一样的,但是他们的引用地址不一样,其实是不等的:

image-20200506110135018

要想让他们相等,得直接将b赋值为a,这样他们的引用地址一样,就是相等的。

image-20200506110256501

类型转换

JS中当不同类型的数据进行计算的时候会进行类型转换,比如下面的例子:

image-20200506110621714

上面的例子中,我们用了加减来操作几个非数字的类型,这时候JS会进行隐式的类型转换,然后再进行加减运算。除了JS本身的隐式转换外,有时候我们还会主动进行类型转换,这就算是显示类型转换了。

隐式类型转换 转为字符串

经常出现在+运算中,并且其中有一个操作数不是数值类型

let s = 4 + 'px' + 5; console.log(s); // 4px5 s = 123e-2 + 'a'; console.log(s); // 1.23a 转为数值

经常出现在数学运算中,表示连接字符串的+运算除外

let s = 'abc'; console.log(+s, -s); // NaN, NaN s = ' 123 '; console.log(+s, -s); // 123 -123 s = new Date(); console.log(+s, -s); // 1588675647421 -1588675647421 (这个操作相当于取毫秒数) 转为bool的场景

经常出现在if或者逻辑运算中

let s = 'abc'; if(s) { console.log(s); // abc } console.log(!!s); // true

下面的值在进行bool转换时会转换为false,除此以外都是true:

0

NaN

''(空字符串)

null

undefined

==运算符

当我们使用==进行比较时,如果两边的类型不同,JS会进行类型转换,然后再比较,===则不会进行类型转换,如果===两边的数据类型不同,直接返回false。

image-20200506112606774

上面只是列举了其中几种情况,更多的情况可以参考下面这种表,这个表来自于MDN。这个表的内容比较多,有些是规范直接定义的,比如null == undefined,也没有太多逻辑可言。我们不确定时可以来查下这个表,但是实际开发中其实是不建议使用==的,因为如果你把这个转换关系记错了的话可能就会引入比较难排查的bug,一般推荐直接使用===。

image-20200506111718423

转换规则

下面这几张表是一些转换规则,来自于《JS权威指南》:

image-20200505185955549

image-20200505190049837

image-20200505190124871

显式类型转换

显式类型转换是我们自己写代码明确转换的类型,可以使代码看起来更清晰,是实际开发时推荐的做法。

image-20200506113002845

转字符串

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxggj.html