详解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 正则替换 replace(regExp, function)用法
May 22 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
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
建立文件交换功能的脚本(一)
2006/10/09 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python实现验证码识别功能
2018/06/07 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
公司活动策划方案
2014/01/13 职场文书
写给女生的道歉信
2014/01/14 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
平安家庭事迹材料
2014/12/20 职场文书
法制教育观后感
2015/06/17 职场文书
催款函范文
2015/06/24 职场文书
2016年元旦寄语
2015/08/17 职场文书