详解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 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
Prototype使用指南之selector.js
Jan 10 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
浅析return false的正确使用
Nov 04 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
js 上传图片预览问题
2010/12/06 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
查环查孕证明
2014/01/10 职场文书
白酒市场营销方案
2014/02/25 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
辞职信如何写
2015/02/27 职场文书
调任通知
2015/04/21 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL