如何检测JavaScript的各种类型


Posted in Javascript onJuly 30, 2016

一、先介绍下5种原始类型

JavaScript中5种原始类型为stringnumberbooleanundefinednull

var name = "Jack";
var age = 32;
var single = false;
var app;  //undefined

console.log(typeof name);  //string
console.log(typeof age);  //number
console.log(typeof single); //boolean
console.log(typeof app);  //undefined
console.log(typeof null);  //object

发现除null外的其他4种基本类型均可以用typeof来识别:

if(typeof name === "string") { name += "Zhang"; }
if(typeof age === "number") { age++; }
if(typeof single === "boolean" && single) { … }
if(typeof app === "undefined") { app = {}; }

因为typeof null会得到object,所以直接用===来检测null:

if(el === null) { … }

二、对象

JavaScript的对象包括内置对象(Date,RegExp ,Error等)和自定义对象

(注意,Function和Array虽然也都是内置对象,但下一节单独讲)

对象不能像基本类型那样用typeof来检测了,因为检测出来的结果都是object

console.log(typeof new Date());  //object
console.log(typeof new RegExp()); //object
console.log(typeof new Error());  //object
console.log(typeof new Person()); //用typeof检测出自定义对象也是object

要改用instanceof来检测:

var date = new Date();
var reg = new RegExp();
var err = new Error();
var me = new Person();

if(date instanceof Date) {  //检测日期
  year = date.getFullYear(); 
}
if(reg instanceof RegExp) {  //检测正则表达式
  reg.test(...); 
}
if(err instanceof Error) {  //检测异常
  throw err; 
}
if(me instanceof Person) {  //检测自定义对象
  ... 
}

但自定义对象有个问题,假设浏览器frameA里和frameB里都定义了Person。 frameA里定义了me对象,用me instanceof Person检测出来为true。但当自定义对象me传给frameB后,在frameB里instanceof会是false。

本节一开头就说了,Function和Array虽然也都是内置对象,但留到下一节讲。原因就是Function和Array也有和自定义对象相同的上述问题。因此Function和Array一般不用instanceof

三、Function

上面说了用instanceof检测Function不能跨frame。因此用typeof来检测,它可跨frame:

var func = function(){};
if(typeof func === 'function') { … }

但IE8以前用typeof来检测DOM系函数会得到object,因此IE8以前改用in:

console.log(typeof document.getElementById);    //object,不是function
console.log(typeof document.getElementsByTagName); //object,不是function
console.log(typeof document.createElement);     //object,不是function

//IE8以前的IE浏览器,要改用in来检测是否支持DOM函数
if("getElementById" in document) { … }    
if("getElementsByTagName" in document) { … }
if("createElement" in document) { … }

四、Array

上面说了用instanceof检测Array不能跨frame。ES5之前都自定义检测方法。其中最精确的方法:依赖Array的toString会返回固定字符串”[Object Array]”的事实来检测

function isArray(arr) {
  return Object.prototype.toString.call(arr) === "[Object Array]";
}

该方法精确且优雅,因此被很多库所采纳,最终在ES5被作为isArray方法引入了Array,参照MDN。现在你不需要自定义检测方法了,直接用isArray()即可。

其他检测方法,都各有缺陷,不能100%精确。但作为一种思路是可以借鉴的。例如依赖Array是唯一包含sort方法的对象的事实来检测:

function isArray(arr) {
  return typeof arr.sort === "function";
}

如果是自定义对象也定义了sort方法,该方法就失效了。

五、属性

检测属性是否在实例对象中应该用hasOwnProperty。如果你不关心属性是在实例对象中还是在原型对象中,可以简单点用in

例如检测字面量对象属性:

var Person = {
  name: "Jack",
  age: 33
};
if("name" in Person) { … }         //true
if(Person.hasOwnProperty("name")) { … }  //true

例如实例对象属性:

var Person = function (name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.location = "Shanghai";

var me = new Person("Jack", 33)
if("name" in me) { … }         //true
if(me.hasOwnProperty("name")) { … }  //true
if("location" in me) { … }       //true
if(me.hasOwnProperty("location")) { … }//false

除此之外其他方法都不好:

if (object[propName])      //Not Good,你怎么知道属性值不是0或1?
if (object[propName] === null)    //Not Good,你怎么知道属性值不是null?
if (object[propName] === undefined)  //Not Good,你怎么知道属性值不是undefined?

总结

用typeof检测string,number,boolean,undefined,Function

用===检测null

用isArray()检测Array

用instanceof检测内置对象(除Function和Array)和自定义对象

用hasOwnProperty检测属性是否在实例对象中。如果你不关心属性是在实例对象中还是在原型对象中,可以简单点用in

好了,本篇介绍如何检测JavaScript各种类型的内容就到这里了,希望大家能够认真学习本文的内容,或许对大家学习JavaScript有所帮助。

Javascript 相关文章推荐
js 回车提交表单两种实现方法
Dec 31 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
详解js中的apply与call的用法
Jul 30 #Javascript
javascript回到顶部特效
Jul 30 #Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 #Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 #Javascript
分享jQuery封装好的一些常用操作
Jul 28 #Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 #Javascript
利用JS实现数字增长
Jul 28 #Javascript
You might like
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
python计算文本文件行数的方法
2015/07/06 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python识别验证码图片实例详解
2020/02/17 Python
python实现一个猜拳游戏
2020/04/05 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
一道Delphi面试题
2016/10/28 面试题
行政前台岗位职责
2015/04/16 职场文书
小学校园广播稿
2015/08/18 职场文书