如何检测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 相关文章推荐
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
JS匿名函数实例分析
Nov 26 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
Feb 19 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
vue获取form表单的值示例
Oct 29 Javascript
详解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中几种常见安全设置详解
2010/04/06 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
详解Python Socket网络编程
2016/01/05 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
pytorch 共享参数的示例
2019/08/17 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
卫校毕业生个人自我鉴定
2014/04/28 职场文书
计算机软件专业求职信
2014/06/10 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
奖金申请报告模板
2015/05/15 职场文书
MySQL GTID复制的具体使用
2022/05/20 MySQL