JavaScript中类型检测
文章首发: http://www.cnblogs.com/sprying/p/4349426.html
本文罗列了一般Js类型检测的方法,是构建Js知识体系的一小块,这篇文章是我很早之前总结的。
一、Js中有5种基本数据类型
Undefined 、Null、Boolean、String、Number(包含NaN)
NaN和任何类型的值都不相等,包括NaN;isNaN用来判断数值是不是NaN类型
二、类型判断
1. isFinite(number)
是不是无穷大。如果是NaN,或者正负无穷大,或者非数字类型,则返回false。
2. typeof运算符
使用的时候,空格或者typeof(param)
返回的值
string
number
boolean
undefined
function
object null也返回object
根据以上,判断类型可以如下:
1 2 3 4 5 6 | var obtainType = function (o){ var t; if (o === null ) return “ null ”; else if (o !== o) return “NaN”; else if ( (t = typeof o) !== ‘object’) return t; } |
可以识别出null、NaN string number boolean undefined function。
上面最后只剩下object,比如数组的识别,自定义类型的识别
3. 数组等原生类型的识别,可以采用如下
1 2 3 4 5 6 7 8 9 10 | function obtainType(type) { return function (obj) { return Object.prototype.toString.call(obj) === "[object " + type + "]" } } var isObject = isType( "Object" ) var isString = isType( "String" ) var isArray = Array.isArray || isType( "Array" ) var isFunction = isType( "Function" ) |
4. 自定义类型判断
1 2 3 4 5 6 7 | /** * 返回函数的名字,可能为空串;不是函数,返回null */ Function.prototype.getName = function () { if ( "name" in this ) return this .name; return this .name = this .toString().match(/ function \s*([^(]*)\(/)[1]; }; |
原生类型和自定义类型的object都可以判断了,于是
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /** * 返回:null NaN undefined string number boolean * function Array String Object(包括一些自定义类型) 自定义类型 */ var obtainType = function (o){ /** * 获取参数类型 * 对象直接量、Object.create、自定义构造函数的类属性皆为Object; * 识别出原生类型 (内置构造函数和宿主对象) */ function classOf(obj){ return Object.prototype.toString.call(obj).slice(8, -1); } /** * 返回函数的名字,可能为空串;不是函数,返回null */ Function.prototype.getName = function () { if ( "name" in this ) return this .name; return this .name = this .toString().match(/ function \s*([^(]*)\(/)[1]; }; var t, c, n; // 处理null值特殊情形 if (o === null ) return "null" ; // NaN:和自身值不相等 if (o !== o) return "NaN" ; // 识别出原生值类型和函数、undefined if ((t = typeof o) !== "object" ) return t; // 识别出原生类型 if ((c = classOf(o)) !== "Object" ) return c; // 返回自定义类型构造函数名字 if (o.constructor && typeof o.constructor === "function" && (n = o.constructor.getName())) return n; return "Object" ; }; |
5.
1 2 3 4 5 | var strObj = new String( 'abc' ); typeof strObj // "object" obtainType(strObj) // "String" |
三、 其它
1. Dom元素判断
if(dom.nodeType){...Dom...}
if(dom.createElement)
2. jQuery等类型判断
$('#aa') instanceof jQuery//不支持跨多窗口和框架子页面
3. if(a) a为null undefined 0 "" NaN时自动转换成false
一般推荐的写法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // bad if (name !== '' ) { // ...stuff... } // good if (name) { // ...stuff... } // bad if (collection.length > 0) { // ...stuff... } // good if (collection.length) { // ...stuff... } |
有任何问题,欢迎留言交流。
注意:已解决的问题,会在整理后删除掉。
*******站在巨人的肩膀上
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战