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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
javascript每日必学之多态
Feb 23 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
JavaScript实现省市区三级联动
Feb 13 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 数组的一个悲剧?
2011/05/11 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python3中exp()函数用法分析
2019/02/19 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
党员目标管理责任书
2014/07/25 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书