详解JavaScript类型判断的四种方法


Posted in Javascript onOctober 21, 2020

JavaScript有八种内置类型,除对象外,其他统称为“基本类型”。

  • 空值(null)
  • 未定义(undefined)
  • 布尔值(boolean)
  • 数字(number)
  • 字符串(string)
  • 对象 (object)
  • 符号(symbol, ES6中新增)
  • 大整数(BigInt, ES2020 引入)

Symbol: 是ES6中引入的一种原始数据类型,表示独一无二的值。

BigInt:是 ES2020 引入的一种新的数据类型,用来解决 JavaScript中数字只能到 53 个二进制位(JavaScript 所有数字都保存成 64 位浮点数,大于这个范围的整数,无法精确表示的问题。具体可查看:新数据类型 — BigInt

一、typeof

typeof是一个操作符而不是函数,其右侧跟一个一元表达式,并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 8 种:number、boolean、symbol、string、object、undefined、function 、bigInt等。

typeof原理是不同的对象在底层都表示为二进制,在Javascript中二进制前(低)三位存储其类型信息。

  • 000: 对象
  • 010: 浮点数
  • 100:字符串
  • 110:布尔
  • 1:整数
console.log(typeof undefined) // undefind
console.log(typeof null)   // object
console.log(typeof true)   // boolean
console.log(typeof 43)    // number
console.log(typeof '21')   // string
console.log(typeof {a:1})   // object
console.log(typeof Symbol()) // symbol
console.log(typeof 123n)   // bigint
function a() {}
console.log(typeof a)     // function
var date = new Date()
var error = new Error()
console.log(typeof date)   // object
console.log(typeof error)   // object

二、instanceof

instanceof 是用来判断 A 是否为 B 的实例,表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。 在这里需要特别注意的是:instanceof 检测的是原型

通俗一些讲,instanceof 用来比较一个对象是否为某一个构造函数的实例。注意,instanceof可以准确的判断复杂数据类型,但是不能正确判断基本数据类型

console.log(12 instanceof Number) // false
console.log('22' instanceof String) // false
console.log(true instanceof Boolean) // false
console.log(null instanceof Object) // false
console.log(undefined instanceof Object) // false
 
console.log([] instanceof Array)  // true
console.log({a: 1} instanceof Object) // true
console.log(json instanceof Object) // true
function a() {}
console.log(a instanceof Function) // true
console.log(new Date() instanceof Date) //true
console.log(reg instanceof RegExp) //true
console.log(error instanceof Error) // true

三、Object.prototype.toString.call()

toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。

对于 Object 对象,直接调用 toString() 就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

console.log(Object.prototype.toString.call(1))     // [object Number]
console.log(Object.prototype.toString.call(1n))     // [object BigInt]
console.log(Object.prototype.toString.call('123'))   // [object String]
console.log(Object.prototype.toString.call(true))    // [object Boolean]
console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null))    // [object Null]
console.log(Object.prototype.toString.call({}))     // [object Object]
console.log(Object.prototype.toString.call([]))     // [object Array]
console.log(Object.prototype.toString.call(function a() {})) // [object Function]
console.log(Object.prototype.toString.call(Symbol()))     // [object Symbol]
console.log(Object.prototype.toString.call(Math))       // [object Math]
console.log(Object.prototype.toString.call(JSON))       // [object JSON]
console.log(Object.prototype.toString.call(new Date()))    // [object Date]
console.log(Object.prototype.toString.call(new RegExp()))   // [object RegExp]
console.log(Object.prototype.toString.call(new Error))    // [object Error]
console.log(Object.prototype.toString.call(window)      // [object Window]
console.log(Object.prototype.toString.call(document)     // [object HTMLDocument]

使用该方法我们可以封装一个isType方法来对类型进行判断

let isType = (type, obj) => {
  return Object.prototype.toString.call(obj) === `[object ${type}]`
}
console.log(isType('Number', 12))  // true
console.log(isType('Number', '12')) // false

或者

let type = function(o) {
  let s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};
console.log(type(12)) // number
console.log(type('12')) // string
console.log(type({})) // object
console.log(type([])) // array

四、constructor

constructor属性,可以得知某个实例对象,到底是哪一个构造函数产生的。

constructor属性表示原型对象与构造函数之间的关联关系,如果修改了原型对象,一般会同时修改constructor属性,防止引用的时候出错。所以,修改原型对象时,一般要同时修改constructor属性的指向。

console.log('22'.constructor === String)       // true
console.log(true.constructor === Boolean)      // true
console.log([].constructor === Array)        // true
console.log(document.constructor === HTMLDocument)  // true
console.log(window.constructor === Window)      // true
console.log(new Number(22).constructor === Number)  // true
console.log(new Function().constructor === Function) // true
console.log((new Date()).constructor === Date)    // true
console.log(new RegExp().constructor === RegExp)   // true
console.log(new Error().constructor === Error)    // true

注意:

1、null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。

2、函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object

以上就是JavaScript类型判断的四种方法的详细内容,更多关于JavaScript类型判断的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 #Javascript
vue中template的三种写法示例
Oct 21 #Javascript
Vue使用v-viewer实现图片预览
Oct 21 #Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 #Javascript
Vue+axios封装请求实现前后端分离
Oct 23 #Javascript
构建一个JavaScript插件系统
Oct 20 #Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
比较完整的微信开发php代码
2016/08/02 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
python发布模块的步骤分享
2014/02/21 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python OpenCV获取视频的方法
2018/02/28 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
《夏夜多美》教学反思
2014/02/17 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
民事辩护词范文
2015/05/21 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS
nginx搭建NFS网络文件系统
2022/04/14 Servers