JS疑惑的数据类型及类型判断方法详解

更新时间：2022年08月16日 15:37:42 作者：寒月十九

这篇文章主要为大家介绍了JS中疑惑的数据类型及类型判断方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

关于javascript这门语言的数据类型你了解多少呢？你有什么方法能够快速的判断数据类型呢？如果可以那如何实现类型转换呢？带着这三个问题开始我们今天的学习吧

数据类型

在javascript中数据类型我们一般分为基本数据类型（值类型）和引用数据类型（对象类型）；

基本数据类型有：

number
String
boolean
Null
Undefined
BigInt
Symbol

引用数据类型有：

Object（对象）
Array（数组）
Function（函数）
Date等（内置对象）

类型判断

一、typeof方法

typeof 123 // "number" 
typeof 'a'  // "string"
typeof true  // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof 21n // "bigint"

通过以上这些例子我们可以总结出一个规律： typeof方法可以准确判断出除了Null之外的所有的基本数据类型（注：typeof null // "object" 是javascript这门语言的历史遗留问题，需要记忆），其他六种基本数据类型都能准确判断，所以我们可以用（typeof 变量 === “undefined”）来判断一个变量是否被声明；但是在判断引用类型时typeof智能判断出函数类型，其他的引用类型都返回'object'。所以我们通常会使用typeof方法来判断基本数据类型。

二、Object.prototype.toString.call()方法

Object.prototype.toString.call()方法，它的返回值是"[ object , 类型]"（注：返回值前面是小写字母，后面是大写字母开头的类型）

Object.prototype.toString.call(123) // "[object Number]"
Object.prototype.toString.call('abc') // "[object String]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"
Object.prototype.toString.call(21n) // "[object BigInt]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(true) // "[object Boolean]

由此可见Object.prototype.toString.call()方法可以准确判断所有的基本数据类型，那么对引用数据类型呢？

Object.prototype.toString.call({a:1}) // "[object Object]"
Object.prototype.toString.call([1,2]) // "[object Array]"
Object.prototype.toString.call(new Date) // "[object Date]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call(new Error()) // "[object Error]"
Object.prototype.toString.call(/a/g) // "[object RegExp]"--正则表达式
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call(JSON) // "[object JSON]"

所以Object.prototype.toString.call()方法可以识别出javascript这门语言中所有的数据类型（据我所知，上述例子中Math属性和正则严格意义上也不算数据类型，因为可以识别出，所以也放在例子里）。

小插曲

如何使用上述的两种方法优雅的封装一个方法，使得我们可以传入任意数据，直接返回它的数据类型（小写字母的字符串）？

方法一:

function dataType(obj) {
    return Object.prototype.toString.call(obj).slice(8,-1)
    }

方法二：

let dataType = {}
['Boolean', 'Number', 'String', 'Array', 'Function', 'Date', 'RegExp', 'Object',
'Error', 'Undefined', 'Null'].map((item, index) =&gt; {
    dataType["[object" + item + "]"] = item.toLowerCase();
})
function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? dataTypeObject.prototype.toString.call(obj)] 
        || 'object' : typeof obj
}

我们一起来解读一下方法二，首先我们先将数据类型的首字母都转化为小写字母，并在添加为我们创建的dataType对象的属性（toLowerCase() 方法将字符串转换为小写。）

当我们传入一个数据时，首先用typeof去判断是基本数据类型还是引用数据类型，因为typeof null // "object"，所以我们的判定条件typeof obj === 'object' || typeof obj === 'function'，就把特殊的null当做引用类型，使用Object.prototype.toString.call()方法也能识别出，实现我们想要的效果。

（在学习过程中我们尽可能多去复杂化问题，使得理解更加深刻，方法一实用性较大）

三、Array.isArray()

在数组身上有一种isArray方法可以判断是否为数组类型数据，返回值是布尔类型（true || false）（在其他语言中arr2 = [1, 'abc', true]严格意义上不算数组，但是在javascript中属于数组）

四、obj instanceof Object

左边放你要判断的内容，右边放类型来进行JS类型判断，只能用来判断复杂数据类型,因为instanceof 是用于检测构造函数（右边）的 prototype 属性是否出现在某个实例对象（左边）的原型链上。

[1,2] instanceof Array  // true
(function(){}) instanceof Function // true
({a:1}) instanceof Object // true
(new Date) instanceof Date // true
实现原理：
function instance_of(L,R){
    let O = R.prototype
    let L = L.__proto__
    while(L !== null){
        if(L === O) return true
        L = L.__proto__
    }
    return false
}
obj instanceof Object方法也可以判断内置对象。

结语

以上就是本期的所有内容，相信此时，判断javascript中的数据类型已经没有什么可以难倒你了，当然判断数据类型的方法不仅这些，但是以上的几种方法（应该）可以解决所有的数据类型判断的问题。

以上就是JS疑惑的数据类型及类型判断方法详解的详细内容，更多关于JS数据类型判断的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

浅谈JS正则RegExp对象
这篇文章主要介绍JS正则RegExp对象，正则表达式是描述字符模式的对象，用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。下面就来看具体详情,需要的朋友可以参考一下
2021-10-10
微信小程序页面传参实例详解
这篇文章主要介绍了微信小程序页面传参实例详解的相关资料,这里对页面跳转及传递参数的功能做个小示例，帮助大家尽快上手，很简单，需要的朋友可以参考下
2016-11-11
微信小程序 MINA文件结构
这篇文章主要介绍了微信小程序 MINA文件结构的相关资料,这里详细介绍了微信小程序的文件目录及文件作用，需要的朋友可以参考下
2016-10-10
项目中常用的 .env 文件原理源码解析
这篇文章主要为大家介绍了项目中常用的 .env 文件原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
微信小程序数据访问实例详解
这篇文章主要介绍了微信小程序数据访问实例详解的相关资料,需要的朋友可以参考下
2016-10-10
JS创建对象的四种方式
这篇文章主要给大家分享JS创建对象的四种方式，分别是字面量的方式去创建对象、使用new字符创建对象、自定义构造函数、工厂模式创建对象，更多详细内容，请参考下面文章的具体内容
2021-11-11
使用javascript解析二维码的三种方式
这篇文章主要给大家分享使用javascript解析二维码的三种方式，二维码就是将我们能看懂的文字语言,以机器语言的形式存储了起来。其中黑色小方块代表的是1,白色小方块代表的是0，黑白相间的图案其实就是一串编码,扫码的过程就是翻译这些编码的过程,需要的朋友可以参考一下
2021-11-11
没有resolve及reject的Promise是否会造成内存泄露
这篇文章主要为大家介绍了一直没有resolve及reject的Promise是否会造成内存泄露的问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
浏览器切换到其他标签页或最小化js定时器是否准时测试
这篇文章主要为大家介绍了浏览器切换到其他标签页或最小化是js定时器是否准时的测试详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
JavaScript异步操作中串行和并行
这篇文章主要介绍了JavaScript异步操作中串行和并行，主要内容是写一下js中es5和es6针对异步函数，串行执行和并行执行的方案。已经串行和并行结合使用的例子。,需要的朋友可以参考一下
2021-11-11