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

时间：2024-01-26 22:27:35

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

数据类型

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

image-20200506103537269

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

image-20200506104330145

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

原始类型

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

    image-20200506104958681

    image-20200506105044457

  2. 原始类型的比较就是比较值，值相等，他们就相等

引用类型

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

    image-20200506105513907

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

    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:

  1. 0
  2. NaN
  3. ''(空字符串)
  4. null
  5. undefined

==运算符

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

image-20200506112606774

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

image-20200506111718423

转换规则

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

image-20200505185955549

image-20200505190049837

image-20200505190124871

显式类型转换

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

image-20200506113002845

转字符串

显式转换为字符串可以使用toString方法，它的执行结果通常和String()方法一致。Number类型的toString方法还支持参数，可以指定需要转换的进制。下面的图是一些原始类型的toString()，null和undefined没有toString方法，调用会报错:

image-20200506113217062

Number类型的toString方法支持进制:

image-20200506113346662

转数值

转为数值就很简单了，经常在用，就是这两个全局方法：parseInt和parseFloat。

对象转字符串

对象转换为字符串和数值会稍微麻烦点，下面我们单独来探究下。对象转为字符串主要有三种方法:

  1. value.toString()

    这个前面讲过了

  2. '' + value。这个是前面提到过的隐式转换，但是value是对象的话会按照下面的顺序进行转换：

    1. 先调用value.valueOf方法，如果值是原始值，则返回
    2. 否则调用value.toString方法，如果值是原始值，则返回
    3. 否则报错TypeError

  3. String(value)。这个是前面提到的显式转换，流程跟前面类似，但是调用toString和valueOf的顺序不一样。

    1. 先调用value.toString方法，如果值是原始值，则返回
    2. 否则调用value.valueOf方法，如果值是原始值，则返回
    3. 否则报错TypeError

需要注意的是，Date对象有点特殊，他始终调用toString方法。

下面我们写一段代码来验证下:

Object.prototype.valueOf = function() {
  return 'aaa';
}

Object.prototype.toString = function() {
  return 'bbb';
}

let a = {};
let b = '' + a;
let c = String(a);

console.log(b);
console.log(c);

上述代码输出是，跟我们预期一样:

image-20200506160225229

对象转数值

对象类型转为数值主要有两种方法:

  1. +value
  2. Number(value)

这两种的执行逻辑是一样的:

  1. 先调用valueOf方法，如果值是原始值，就返回
  2. 否则，调用toString方法，然后将toString的返回值转换为数值

照例写个例子看下:

Object.prototype.valueOf = function() {
  return {};
}

Object.prototype.toString = function() {
  return 'bbb';
}

let a = {};
let b = +a;
let c = Number(a);

console.log(b);
console.log(c);

上述代码的输出都是NaN，这是因为我们toString方法返回的bbb没办法转化为正常数值，强行转就是NaN:

image-20200506160750545

类型检测

类型检测是我们经常遇到的问题，面试时也经常问到各种类型检测的方法，下面是几种常用的类型检测的方法。

typeof

做类型检测最常用的就是typeof了:

let a;
typeof a;   // undefined

let b = true;
typeof b;   // boolean

let c = 123;
typeof c;   // number

let d = 'abc';
typeof d;   // string

let e = () => {};
typeof e;   // function

let f = {};
typeof f;   // object

let g = Symbol();
typeof g;   // symbol

instanceof

typeof最简单，但是他只能判断基本的类型，如果是对象的话，没法判断具体是哪个对象。instanceof可以检测一个对象是不是某个类的实例，这种检测其实基于面向对象和原型链的，更多关于instanceof原理的可以看这篇文章。下面来看个例子:

let a = new Date();
a instanceof Date;  // true

constructor

constructor的原理其实跟前面的instanceof有点像，也是基于面向对象和原型链的。一个对象如果是一个类的实例的话，那他原型上的constructor其实也就指向了这个类，我们可以通过判断他的constructor来判断他是不是某个类的实例。具体的原理在前面提到的文章也有详细说明。还是用上面那个例子:

let a = new Date();
a.constructor === Date;  // true

使用constructor判断的时候要注意，如果原型上的constructor被修改了，这种检测可能就失效了，比如:

function a() {}
a.prototype = {
  x: 1
}

let b = new a();
b.constructor === a;    // 注意这时候是 false

上面为false的原因是，constructor这个属性其实是挂在a.prototype下面的，我们在给a.prototype赋值的时候其实覆盖了之前的整个prototype，也覆盖了a.prototype.constructor,这时候他其实压根就没有这个属性，如果我们非要访问这个属性，只能去原型链上找，这时候会找到Object:

image-20200506172606821

要避免这个问题，我们在给原型添加属性时，最好不要整个覆盖，而是只添加我们需要的属性，上面的改为:

a.prototype.x = 1;

如果一定要整个覆盖，记得把constructor加回来:

a.prototype = {
  constructor: a,
  x: 1
}

duck-typing

duck-typing翻译叫“鸭子类型”，名字比较奇怪，意思是指一个动物，如果看起来像鸭子，走起路来像鸭子，叫起来也像鸭子，那我们就认为他是只鸭子。就是说我们通过他的外观和行为来判断他是不是鸭子，而不是准确的去检测他的基因是不是鸭子。这种方式在科学上当然是不严谨的，但是在部分场景下却是有效的。用编程语言来说，就是看某个对象是不是具有某些特定的属性和方法，来确定他是不是我们要的对象。比如有些开源库判断一个对象是不是数组会有下面的写法:

function isArray(object) {
  return object !== null && 
    typeof object === 'object' && 
    'splice' in object && 
    'join' in object
}

isArray([]);  // true

这就是通过检测目标对象是不是包含Array应该有的方法来判断他是不是一个Array。这就是所谓的看着像鸭子，那就是鸭子。但是一个具有splice和join方法的对象也能通过这个检测，所以这样是不准确的，只是部分场景适用。

Object.prototype.toString.call

Object.prototype.toString.call是比较准确的，可以用来判断原生对象具体是哪个类型:

Object.prototype.toString.call(new Array());   // [object Array]
Object.prototype.toString.call(new Date());    // [object Date]

这个方法返回的是[object XXX]，这个XXX是对应的构造函数名字。但是他只能检测原生对象，对于自定义类型是没有用的:

function a() {}
let b = new a();

Object.prototype.toString.call(b);   // [object Object]

可以看到对于自定义类a的实例b，我们得到仍然是[object Object]，而不是我们预期的[object a]。

一些原生方法: Array.isArray，Number.isInteger

JS为了解决类型检测的问题，也引入了一些原生方法来提供支持，比如Array.isArray和Number.isInteger等。Array.isArray可以用来检测一个对象是不是数组:

Array.isArray([]);   // true
Array.isArray(123);  // false

Number.isInteger可以用来检测一个对象是不是整数:

Number.isInteger(1);     // true
Number.isInteger(-1);    // true
Number.isInteger(-1.1);  // false
Number.isInteger('aaa'); // false

如果有原生检测的方法我们当然推荐使用原生方法了，但是目前原生方法并没有那么多和全面，很多时候还是要用前面的方法来检测类型。

小节

JS其实没有一种完美的方法来检测所有的类型，具体的检测方法需要我们根据实际情况来进行选择和取舍。下面是几种方法的总结：

image-20200506180011564

总结

  1. JS有两种数据类型，原始类型和引用类型，引用类型主要就是对象。
  2. 当我们使用+，逻辑判断或者==时会有隐式的类型转换。
  3. 有时候隐式的类型转换会出现我们不想要的结果，如果我们确定要进行判断或者类型转换，最好使用显式的，比如使用===，而不是==。
  4. 对象转为字符串和数值可能需要调valueOf和toString方法，调用顺序需要看具体场景。
  5. JS没有一个完美的类型检测方法，我们最好根据需要选择具体的检测方法。

文章的最后，感谢你花费宝贵的时间阅读本文，如果本文给了你一点点帮助或者启发，请不要吝啬你的赞和GitHub小星星，你的支持是作者持续创作的动力。

作者博文GitHub项目地址： https://github.com/dennis-jiang/Front-End-Knowledges

作者掘金文章汇总：https://juejin.im/post/5e3ffc85518825494e2772fd

相关文章