详解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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
详解jQuery事件
Jan 13 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
原生js滑动轮播封装
Jul 31 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
小程序实现列表多个批量倒计时
2021/01/29 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python使用str & repr转换字符串
2016/10/13 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
Java如何读取CLOB字段
2013/10/10 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
董事长秘书工作职责
2014/06/10 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
环保建议书作文300字
2015/09/14 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
远程教育学习心得体会
2016/01/23 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang