详解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 相关文章推荐
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
使用js画图之饼图
Jan 12 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
原生JS实现分页
Apr 19 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP引用(&)各种使用方法实例详解
2014/03/20 PHP
php中的动态调用实例分析
2015/01/07 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
javascript实现表单验证
2016/01/29 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python 基础知识之字符串处理
2017/01/06 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python实现远程控制电脑
2019/05/23 Python
python获取array中指定元素的示例
2019/11/26 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
PHP面试题集
2016/12/18 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
团队精神的演讲稿
2014/05/14 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
介绍信样本
2015/01/31 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书