JavaScript数据类型检测实现方法

电玩女神 2024-03-31 13:06 63阅读 0赞

Javascript中检查数据类型一直是老生常谈的问题,类型判断在web开发中也有着非常广泛的应用,所以[微点阅读][Link 1]下面这篇文章主要给大家介绍了关于JS数据类型检测的那些事,需要的朋友可以参考下。

### 一、typeof ###

*  优点：能快速判断基本数据类型，除了 `Null`；
 *  缺点：不能判别 `Object`、`Array`、`Null` ，都返回 `object`；判别引用类型除函数显示 `function`外，其他显示为 `object`

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>console.log(</code><code>typeof</code> <code>55);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// number</code> <code>console.log(</code><code>typeof</code> <code>true</code><code>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// boolean</code> <code>console.log(</code><code>typeof</code> <code>'aa'</code><code>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// string</code> <code>console.log(</code><code>typeof</code> <code>undefined);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// undefined</code> <code>console.log(</code><code>typeof</code> <code>function</code><code>(){});&nbsp;&nbsp;&nbsp; </code><code>// function</code> <code>console.log(</code><code>typeof</code> <code>Symbol(</code><code>"foo"</code><code>));&nbsp;&nbsp; </code><code>// symbol</code> <code>console.log(</code><code>typeof</code> <code>553119869n);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// bigint</code> <code>// 不能判别</code> <code>console.log(</code><code>typeof</code> <code>[]);&nbsp;&nbsp; </code><code>// object</code> <code>console.log(</code><code>typeof</code> <code>{});&nbsp;&nbsp; </code><code>// object</code> <code>console.log(</code><code>typeof</code> <code>null</code><code>); </code><code>// object</code> </td> 
 </tr> 
 </tbody> 
</table>

### 二、instanceof ###

MDN：

`instanceof` 运算符 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

理解：判断在其原型链中能否找到该类型的原型。

语法：

> object instanceof constructor

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>function</code> <code>D(){}</code> <code>var</code> <code>o = </code><code>new</code> <code>D();</code> <code>o </code><code>instanceof</code> <code>D;&nbsp; </code><code>// true</code> <code>o </code><code>instanceof</code> <code>Object; </code><code>// true</code> </td> 
 </tr> 
 </tbody> 
</table>

*  优点：能区分`Array`、`Object`和 `Function`，适用于判断自定义的类实例对象
 *  缺点：不能判断 `Number`，`Boolean`，`String` 基本数据类型

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>console.log(55 </code><code>instanceof</code> <code>Number);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// false</code> <code>console.log(</code><code>true</code> <code>instanceof</code> <code>Boolean);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// false </code> <code>console.log(</code><code>'aa'</code> <code>instanceof</code> <code>String);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// false&nbsp; </code> <code>console.log([] </code><code>instanceof</code> <code>Array);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// true</code> <code>console.log(</code><code>function</code><code>(){} </code><code>instanceof</code> <code>Function);&nbsp;&nbsp;&nbsp; </code><code>// true</code> <code>console.log({} </code><code>instanceof</code> <code>Object);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// true</code> </td> 
 </tr> 
 </tbody> 
</table>

String 对象和 Date 对象都属于 Object 类型 和 一些特殊情况：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>var</code> <code>simpleStr = </code><code>"a simple string"</code><code>;</code> <code>var</code> <code>objStr = </code><code>new</code> <code>String();</code> <code>var</code> <code>newStr = </code><code>new</code> <code>String(</code><code>"String created with constructor"</code><code>);</code> <code>var</code> <code>aDate = </code><code>new</code> <code>Date();</code> <code>var</code> <code>myNonObj = Object.create(</code><code>null</code><code>);</code> <code>simpleStr </code><code>instanceof</code> <code>String; </code><code>// false，非对象实例，因此返回 false</code> <code>objStr </code><code>instanceof</code> <code>String;&nbsp;&nbsp;&nbsp; </code><code>// true</code> <code>newStr </code><code>instanceof</code> <code>String;&nbsp;&nbsp;&nbsp; </code><code>// true</code> <code>objStr </code><code>instanceof</code> <code>Object;&nbsp;&nbsp;&nbsp; </code><code>// true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> <code>myNonObj </code><code>instanceof</code> <code>Object; </code><code>// false，一种创建非 Object 实例的对象的方法</code> <code>aDate </code><code>instanceof</code> <code>Date;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// true</code> <code>aDate </code><code>instanceof</code> <code>Object;&nbsp;&nbsp;&nbsp; </code><code>// true</code> </td> 
 </tr> 
 </tbody> 
</table>

### 三、Object.prototype.toString.call() ###

*  优点：精准判断数据类型，所有原始数据类型都是能判断；
 *  缺点：写法繁琐，最好进行封装后使用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>var</code> <code>toString = Object.prototype.toString;</code> <code>console.log(toString.call(55));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Number]</code> <code>console.log(toString.call(</code><code>true</code><code>));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Boolean]</code> <code>console.log(toString.call(</code><code>'aa'</code><code>));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object String]</code> <code>console.log(toString.call([]));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Array]</code> <code>console.log(toString.call(</code><code>function</code><code>(){})); </code><code>// [object Function]</code> <code>console.log(toString.call({}));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Object]</code> <code>console.log(toString.call(undefined));&nbsp;&nbsp;&nbsp; </code><code>// [object Undefined]</code> <code>console.log(toString.call(</code><code>null</code><code>));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Null]</code> <code>console.log(toString.call(Math));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Math]</code> <code>console.log(toString.call(Set));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Function] Set 构造函数</code> <code>console.log(toString.call(Array));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Function] Array 构造函数</code> <code>console.log(toString.call(Map));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Function]</code> <code>console.log(toString.call(Date));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Function]</code> <code>console.log(toString.call(</code><code>new</code> <code>Set()));&nbsp;&nbsp;&nbsp; </code><code>// [object Set]</code> <code>console.log(toString.call(</code><code>new</code> <code>Array()));&nbsp; </code><code>// [object Array]</code> <code>console.log(toString.call(</code><code>new</code> <code>Map()));&nbsp;&nbsp;&nbsp; </code><code>// [object Map]</code> <code>console.log(toString.call(</code><code>new</code> <code>Date()));&nbsp;&nbsp; </code><code>// [object Date]</code> <code>function</code> <code>D(){}</code> <code>console.log(toString.call(D));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Function]</code> <code>console.log(toString.call(</code><code>new</code> <code>D()));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// [object Object]</code> </td> 
 </tr> 
 </tbody> 
</table>

### 面试问题 ###

如何判断变量是否为数组？

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>let arr = []</code> <code>console.log(Array.isArray(arr));&nbsp;&nbsp;&nbsp; </code><code>// true</code> <code>arr.__proto__ === Array.prototype;&nbsp; </code><code>// true</code> <code>arr </code><code>instanceof</code> <code>Array;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// true</code> <code>Object.prototype.toString.call(arr);</code><code>// [object Array]</code> </td> 
 </tr> 
 </tbody> 
</table>

判断是否是 Promise 对象

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>function</code> <code>isPromise(val) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>typeof</code> <code>val.then === </code><code>'function'</code> <code>&amp;&amp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>typeof</code> <code>val.</code><code>catch</code> <code>=== </code><code>'function'</code> <code>&nbsp;&nbsp;</code><code>)</code> <code>}</code> <code>let p = </code><code>new</code> <code>Promise((resolve, reject) =&gt; {});</code> <code>console.log(isPromise(p)); </code><code>// true</code> </td> 
 </tr> 
 </tbody> 
</table>

到此这篇关于JavaScript数据类型检测实现方法详解的文章就介绍到这了

来源：[https://www.weidianyuedu.com][Link 1]

[Link 1]: https://www.weidianyuedu.com