如何检测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动画效果代码
Jul 20 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
BootStrap的两种模态框方式
May 10 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python求凸包及多边形面积教程
2020/04/12 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
高中生评语大全
2014/04/25 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
关于车尾的标语大全
2015/08/11 职场文书
小学大队长竞选稿
2015/11/20 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
能让Python提速超40倍的神器Cython详解
2021/06/24 Python