JavaScript isArray()函数判断对象类型的种种方法


Posted in Javascript onOctober 11, 2010

1) typeof 运算符
typeof 是一元运算符,返回结果是一个说明运算数类型的字符串。如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在)。
但 typeof 的能力有限,其对于Date、RegExp类型返回的都是"object"。如:

typeof {}; // "object" 
typeof []; // "object" 
typeof new Date(); // "object"

所以它只在区别对象和原始类型的时候才有用。要区一种对象类型和另一种对象类型,必须使用其他的方法。如:instanceof 运算符或对象的 constructor 属。

2)instanceof 运算符。
instanceof 运算符要求其左边的运算数是一个对象,右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例,则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例,或者 object 为 null,则返回 false。如:

[] instanceof Array; // true
[] instanceof Object; // true
[] instanceof RegExp; // false
new Date instanceof Date; // true

所以,可以用instanceof运算符来判断对象是否为数组类型:

function isArray(arr)
{
return arr instanceof Array;
}

3)constructor 属性。
JavaScript中,每个对象都有一个constructor属性,它引用了初始化该对象的构造函数,常用于判断未知对象的类型。如给定一个求知的值通过typeof运算符来判断它是原始的值还是对象。如果是对象,就可以使用constructor属性来判断其类型。所以判断数组的函数也可以这样写:

function isArray(arr)
{
return typeof arr == "object" && arr.constructor == Array;
}

很多情况下,我们可以使用instanceof运算符或对象的constructor属性来检测对象是否为数组。例如很多JavaScript框架就是使用这两种方法来判断对象是否为数组类型。
但是检测在跨框架(cross-frame)页面中的数组时,会失败。原因就是在不同框架(iframe)中创建的数组不会相互共享其prototype属性。例如:

<script> 
window.onload=function(){ 
var iframe_arr=new window.frames[0].Array; 
alert(iframe_arr instanceof Array); // false 
alert(iframe_arr.constructor == Array); // false 
} 
</script> 
<body> 
<iframe></iframe> 
</body>

在Ajaxian上看到了一种精确的检测方法,跨原型链调用toString()方法:Object.prototype.toString()。可以解决上面的跨框架问题。

当Object.prototype.toString(o)执行后,会执行以下步骤:
1)获取对象o的class属性。
2)连接字符串:"[object "+结果(1)+"]"
3)返回 结果(2)

例如:

Object.prototype.toString.call([]); // 返回 "[object Array]"
Object.prototype.toString.call(/reg/ig); // 返回 "[object RegExp]"

这样,我们就可以写一个健壮的判断对象是否为数组的函数:

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

此种方法得到国外多个javaScript大师的认可,在即将发布的jQuery 1.3中将使用这种方法来检测数组。

prototype.js的一个维护者写了下面这个函数,用于获取对象的类型名

/** 
* Returns internal [[Class]] property of an object 
* 
* Ecma-262, 15.2.4.2 
* Object.prototype.toString( ) 
* 
* When the toString method is called, the following steps are taken: 
* 1. Get the [[Class]] property of this object. 
* 2. Compute a string value by concatenating the three strings "[object ", Result (1), and "]". 
* 3. Return Result (2). 
* 
* __getClass(5); // => "Number" 
* __getClass({}); // => "Object" 
* __getClass(/foo/); // => "RegExp" 
* __getClass(''); // => "String" 
* __getClass(true); // => "Boolean" 
* __getClass([]); // => "Array" 
* __getClass(undefined); // => "Window" 
* __getClass(Element); // => "Constructor" 
* 
*/ 
function __getClass(object) 
{ 
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1]; 
};

扩展一下,用于检测各种对象类型:
var is = 
{ 
types : ["Array", "Boolean", "Date", "Number", "Object", "RegExp", "String", "Window", "HTMLDocument"] 
} for(var i = 0, c; c = is.types[i ++ ]; ) 
{ 
is[c] = (function(type) 
{ 
return function(obj) 
{ 
return Object.prototype.toString.call(obj) == "[object " + type + "]"; 
} 
} 
)(c); 
} 
alert(is.Array([])); // true 
alert(is.Date(new Date)); // true 
alert(is.RegExp(/reg/ig)); // true
Javascript 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 #Javascript
jQuery 表单验证扩展代码(一)
Oct 11 #Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 #Javascript
基于jQuery的实现简单的分页控件
Oct 10 #Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 #Javascript
Tips 带三角可关闭的文字提示
Oct 06 #Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 #Javascript
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
Javascript中的数学函数集合
2007/05/08 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
小程序实现录音功能
2020/09/22 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python书籍信息爬虫实例
2018/03/19 Python
Django 路由控制的实现代码
2018/11/08 Python
如何在python中实现随机选择
2019/11/02 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
幼儿园新学期寄语
2014/01/18 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
语文复习计划
2015/01/19 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js