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 - 如何引入js代码
Mar 09 Javascript
编辑浪子版表单验证类
May 12 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
js实现模糊匹配功能
Feb 15 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
node中的密码安全(加密)
Sep 17 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
js实现数字滚动特效
Dec 16 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
oracle资料库函式库
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
试用php中oci8扩展
2015/06/18 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
百度地图api如何使用
2015/08/03 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
详解如何让Express支持async/await
2017/10/09 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
技能比赛获奖感言
2014/02/14 职场文书
大学信息公开实施方案
2014/03/09 职场文书
大学生村官承诺书
2014/03/28 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
大学毕业生个人总结
2015/02/28 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
Python编程编写完善的命令行工具
2021/09/15 Python