小结 javascript中的类型检测
先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽!
关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了线上bug。今天回顾《编写可维护的javascript》第八章“避免空比较”,里面详细说明了javascript中各种类型比较问题,现在想来当时的代码基本把所有的忌讳都犯了一遍,就那么上线了简直对不起党和人民。。。
| 类型检测 | |||||
| 类型 | 检测方法 | 检测对象 | 检测结果 | 缺点 | 备注 |
| 原始值 | typeof | 字符串 | string | ||
| 数字 | number | ||||
| 布尔值 | boolean | ||||
| undefined | undefined | ||||
| null | object | 引用类型的typeof结果为object,不能够起到检测的作用 | 检测null应用===或!== | ||
| 引用值 | instanceof | 内置类型:Object,Date,Error,RegExp | true/false | instanceof会检测原型链,每个对象都继承自Object | |
| 自定义类型及内置类型中的function、Array | true/false | frame A、B中分别定义构造函数Person,且两个Person完全相同。A中创建实例传入B中,则有, frameAPersonInstance instanceof frameAPerson //true frameAPersonInstance instanceof frameBPerson //false |
唯一的检测方法 | ||
| typeof | function | function //IE8以上 object //IE8及以下 |
针对IE8及以下版本,由于其未将DOM实现为内置的javascript方法,需使用 if("xxx" in document)(){};来检测DOM的方法 |
||
| Array.isArray() | Array | true/false | ECMAScript5,适用于IE9+,FF4+,SF5+,O10.5+,Chrome | ||
| Object.prototype.toString.call(value) === "[Object Array]" |
true/false | 这种方法适用于所有内置对象,如JSON等 | |||
| 属性是否在对象中存在 | “XXX”in object | 属性 | 会深入检测实例及其继承的对象原型 | ||
| hasOwnProperty() | true/false //IE8以上 无此方法 //IE8及以下 |
针对IE8及以下版本,由于DOM对象并非继承自Object,因此不包含此方法。所以需要检测方法是否存在: if(object.hasOwnProperty("related")){}; //针对非DOM对象 if("hasOwnProperty" in object && object.hasOwnProperty("related")){}; //不确定是否为DOM对象时 |
调用DOM对象的hasOwnProperty方法之前应先检测其是否存在!若已经知道对象不是DOM则可省略检测存在。 | ||
总的来说:
一、表总结
typeof通常用于基本类型(null除外)及function的检测;
instanceof通常用于自定义类型的检测;
准确的 引用类型 检测使用Object.prototype.toString.call(value) === "[Object Array]"等;
属性 的检测使用in和hasOwnProperty()。
二、补充
通过constructor进行类型检测,参考http://www.cnblogs.com/zhengchuyu/archive/2008/07/21/1247764.html
不过不推荐文中使用正则表达式match检测,正则会对性能有一定影响,并且正则的使用稍不留意就会给自己留下各种坑儿~~
三、性能
非IE系:typeof>.toString.call()>10*constructor
IE系列:typeof>constructor>.toString.call()
小结 javascript中的类型检测的更多相关文章
- javascript中的类型检测
最常见的是使用 typeof 来判断数据类型 可以区分4种基本类型,即 “number”,”string”,”undefined”,”boolean”,第5种基本类型null类型返回值为object( ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- JavaScript中值类型和引用类型的区别
JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...
- javascript 中的类型
javascript 中的类型 js 是一门弱语言,各式各样的错误多种多样,特别是确定返回值有问题的时候,你会用什么来进行表示错误? 我一般有三个选择: null '' error {} 第一个选择 ...
- JavaScript中Float类型保留两位小数
JavaScript中Float类型保留两位小数 核心方法: num:要操作的数字 size:要保留的位数 parseFloat(num).toFixed(size); 实现代码如下:var ...
- JavaScript中值类型与引用类型
JavaScript中的变量类型有哪些? 值类型:字符串(string).数值(number).布尔值(boolean).null.undefined 引用类型:对象(Object).数组(Array ...
- 编程笔记:JavaScript 中的类型检查
在Badoo的时候我们写了大量的JS脚本,光是在我们的移动web客户端上面就有大概60000行,可想而知,维护这么多JS可是相当具有挑战性的.在写如上规模js脚本客户端应用的时候我们必须对一件事保持警 ...
- 浅谈 JavaScript 中 Array 类型的方法使用
前言:Array 类型是 JavaScript 中除了 Object 类型以外最常用的类型. 一.创建数组 JavaScript 中的数组与其他语言中的数组有着很大的区别.例如Java.PHP等语言中 ...
- 【你不知道的javaScript 中卷 笔记1】javaScript中的类型与值
一.类型与值 1.0 javaScript 七种内置类型: 空值(null) 未定义(undefined) 布尔值( boolean) 数字(number) 字符串(string) 对象(object ...
随机推荐
- Swift-07-析构器deinit
析构器只适用于类类型,当一个类的实例被释放之前,析构器会被立即调用.析构器用关键字deinit来标识,类似于构造器用init来标识. 原理: Swift会自动释放不再需要的实例以释放资源.Swift通 ...
- 《JAVA NIO》Channel
3.通道 Channle主要分为两类:File操作对应的FIleChannel和Stream操作对应的socket的3个channe. 1.这3个channel都是抽象类.其具体实现在SPI里面. 2 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- 输出Java的GC信息
-verbose:gc -XX:+printGC 可以打印GC的简要信息 [GC 4790K->374K(15872K), 0.0001606 secs] [GC 4790K->374K( ...
- php 如何进入mysql数据库
我是初学者,有两台电脑,进入数据库通用的方法直接找mysql.exe,如下例: F:\Program Files\wamp\bin\mysql\mysql5.5.20\bin
- 求以下表达式的值,写出您想到的一种或几种实现方法: 1-2+3-4+……+m
private static int fun(int m) { ; ; i <= m; i++) { == ) temp = temp + i; else temp = temp - i; } ...
- Android 开发之如何保证Service不被杀掉(broadcast+system/app)
序言 最近项目要实现这样一个效果:运行后,要有一个service始终保持在后台运行,不管用户作出什么操作,都要保证service不被kill,这可真是一个难题.参考了现今各种定制版的系统和安全厂商牛虻 ...
- 美团、点评、猫眼App下拉加载效果的源码分享
今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果 以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...
- Android中三种onClick事件的实现与对比
方式一:在activity的onCreate()方法中,嵌入如下代码: Button button = (Button)findViewById(R.id.button1); button.setOn ...
- Java基础之处理事件——添加菜单图标(Sketcher 8 with toolbar buttons and menu icons)
控制台程序. 要为菜单项添加图标以补充工具栏图标,只需要在创建菜单项的Action对象中添加IconImage对象,作为SMALL_ICON键的值即可. // Defines application ...