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 动态加载 css 方法总结
Jul 11 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
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+MSSQL分页的例子
2006/10/09 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php获取域名的google收录示例
2014/03/24 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
微信自定义分享php代码分析
2016/11/24 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
python实现图片压缩代码实例
2019/08/12 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
地质灾害防治方案
2014/05/14 职场文书
服务员岗位职责范本
2015/04/09 职场文书
大学生暑期实践报告
2015/07/13 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python