JS数据类型检测的坑和通用数据类型检测方法
目录
- 1 前言
- 2 四种数据类型检测方法介绍
- 2.1 typeof的坑及原理
- 2.2 instanceof的坑及原理
- 2.3 constructor的坑及原理
- 2.4 Object.prototype.toString.call()
- 3 将Object.prototype.toString封装成易于使用的类型检测方法
- 4 总结
1 前言
提起JS的数据类型检测,大多数搞前端的朋友都知道有typeof
和instanceof
两个关键字可以用,其实还有另外2个方法constructor
和Object.prototype.toString.call()
可能知道的人并不多,并且前三种方法实际都有缺陷,只有最后一种toString的方法是完善。本文是笔者在听了珠峰教育的周啸天老师关于数据类型检测的讲课后对所学知识的整理和总结,希望对想了解该问题的读者有所帮助。
2 四种数据类型检测方法介绍
2.1 typeof的坑及原理
typeof用法最简单,直接在后面跟要检测的值。它可以用来检测除null之外的其它原生类型,但无法区分null和对象类型,原因是其在底层实现上是根据被检测类型的二进制前几位来检测的,而null和对象在底层的二进制表示前3位都是000,因此无法区分。
typeof null // "object"
typeof [] // "object"
typeof /a*/ // "object"
2.2 instanceof的坑及原理
为了弥补typeof的缺陷,后面人们使用instanceof。instanceof用来判断某个实例是否属于某一类型。它的实现原理是通过上溯实例的原型链来判断是否属于某类型。由于原型是可以被修改的,因此使用instanceof来检测类型也不靠谱。而且instanceof也不能检测基本类型。比如下面的例子:
let obj = {"val": 1
}
obj.__proto__ = []
obj instanceof Array // true
1 instanceof Number // false
2.3 constructor的坑及原理
constructor虽然支持基本类型,但因为对象的constructor也可以被随意修改,因此也不靠谱
let obj = {"val": 1
}
obj.constructor = Array
obj.constructor == Array // true
2.4 Object.prototype.toString.call()
Object.prototype.toString()方法返回的是"[object Object]",也即Object的类型字符串,也被称为stringTag,利用call()方法即可应用在需要被检测类型的值上。该方法是比较完善的(唯一的小缺点就是无法区分原生类型和相应的包装对象),但使用起来有点麻烦。实践中,对于除null之外的原生类型,可使用typeof,其它情况再用stringTag方法。
Object.prototype.toString.call("a") // "[object String]"
Object.prototype.toString.call(String("a")) // "[object String]"
Object.prototype.toString.call(/a*/) // "[object RegExp]"
Object.prototype.toString.call({}) // "[object Object]"
3 将Object.prototype.toString封装成易于使用的类型检测方法
// 参考jQuery的实现
(function() {let class2type = {}let toString = class2type.toString// 设定数据类型的映射表let classes = ["Number", "String", "Bollean", "Symbol", "Null", "Undefined", "Object", "Array", "RegExp", "Date", "Error", "Function"]classes.forEach(name=>{class2type[`[object ${name}]`]=name.toLowerCase()})function toType(val) {return class2type[toString.call(val)]}window.toType = toType
})()
4 总结
typeof函数虽然简单易用,但存在无法分清null和Object以及不能细分各种对象类型的缺陷,通过Object.prototype.toString.call()则能很好地弥补其不足,实践中可以将二者结合使用或者基于Object.prototype.toString.call()直接封装一个简易方法。
参考资料:
- JavaScript专题(六)类型检测
JS数据类型检测的坑和通用数据类型检测方法相关推荐
- 细说浏览器特性检测(2)-通用事件检测
在上一篇中介绍了jQuery1.4版本新增的几个浏览器特性检测方案和具体的目的,本文将以事件为中心,介绍一个较为完整.通用的事件检测方案. 事件检测,即检测某一事件在不同的浏览器中是否存在(可用),这 ...
- js 循环拆词_javascript forEach通用循环遍历方法
循环遍历一个元素是开发中最常见的需求之一,那么让我们来看一个由框架BASE2和Jquery的结合版本吧. 上一次的错误太多,排版也出现了问题,重写了一遍,希望大家支持. 循环遍历一个元素是开发中最常见 ...
- qt 将不同的数据类型组成一个新类型_SQL 通用数据类型
SQL 通用数据类型 数据类型定义列中存放的值的种类. 数据库表中的每个列都要求有名称和数据类型. SQL 开发人员必须在创建 SQL 表时决定表中的每个列将要存储的数据的类型. 数据类型是一个标签, ...
- decimal是( )数据类型_SQL 通用数据类型
SQL 通用数据类型 数据类型定义列中存放的值的种类. 数据库表中的每个列都要求有名称和数据类型. SQL 开发人员必须在创建 SQL 表时决定表中的每个列将要存储的数据的类型. 数据类型是一个标签, ...
- 基于昇腾AI异构计算架构CANN的通用目标检测与识别一站式方案初体验
前言 强大的社会粘性不断催温数字化发展,目标检测与识别作为计算机视觉领域的一项关键技术,应用场景广泛,前景十分广阔,从城市治理.楼宇园区.互联网等领域,延伸至智能家居.金融.医疗影像等更多创新领域.随 ...
- java支持的数据类型有哪些_Java支持的数据类型有哪些?什么时候自动装拆箱?...
java中的8种基本数据类型:boolean byte char short int float double long 自动拆装箱的问题引入: 由于在一开始学习java的时候,"万物皆对象 ...
- vn的可变数据类型_可变与不可变数据类型详解
在学习python过程中我们一定会遇到不可变数据类型和可变数据类型. 1.名词解释 以下所有的内容都是基于内存地址来说的. 不可变数据类型: 当该数据类型的对应变量的值发生了改变,那么它对应的内存地址 ...
- python list是不可变的数据类型吗_python中不可变数据类型和可变数据类型
1.名词解释 以下所有的内容都是基于内存地址来说的. 不可变数据类型: 当该数据类型的对应变量的值发生了改变,那么它对应的内存地址也会发生改变,对于这种数据类型,就称不可变数据类型. 可变数据类型 : ...
- 【JS红宝书学习】9客户端检测
因为浏览器间存在大大小小的差异以及怪癖(quirk),开发人员应当优先采取一种更通用的方法,然后在使用特定于浏览器的技术增强该方案.当然这是红宝书的观点,是一种渐进增强的观点,还有与之相对的优雅降级思 ...
最新文章
- Openstack组建部署 — Glance Install
- boost:验证Boost的BOOST_CLASS_REQUIRE宏
- ASP.NET缓存:方法分析和实践示例
- android meta工具,android ota 升级包制作分析 (5 工具)
- Oracle(二)单行函数
- 羽枭android,【答疑】Unreal Engine 4 是怎样发布android的? - 视频教程线上学
- 为什么使用getrequestdispatcher跳转出现404_网站出现404错误时的处理方法
- (备忘)Java web项目迁移到Centos7中验证码无法显示
- 上下文无关文法(CFG)
- Android 修改阿拉伯语数字显示
- ubuntu系统给u盘拷贝文件
- 教你炒股票27:盘整背驰与历史性底部
- H3C交换机链路聚合配置
- 基于JavaWeb的小区物业管理系统的设计与实现
- 使用分布式词汇对比词向量区分正反义词
- 排除AP无法上线原因
- RTB广告大数据时代 人才奇缺培养迫在眉睫
- 请简述独占设备的分配过程。
- android jdk和ndk下载地址,cocos2d-x Android(SDK,NDK,JDK,ANT)下载地址
- 《Android游戏编程之从零开始》书评之基础的魅力
热门文章
- 微信小程序api基础应用
- 使用JavaScript制作待办事项列表
- OkHttp3-使用详解-OkHttpClient
- matlab repeat until,汇编语言用.REPEAT和.WHILE伪指令实现循环
- LeetCode ---Fizz和Buzz
- 百度地图-绘制工具以及覆盖物的简单使用
- ORACLE DBLINK
- linux查看其他用户history,从Linux服务器上的其他用户隐藏命令历史记...
- 安装RVM(ruby版本控制)
- idea提交git报401错误解决办法