前言
关于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) => { 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数据类型判断的资料请关注阿兔在线工具其它相关文章!