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 相关文章推荐
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
jQuery中库的引用方法
Jan 06 jQuery
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
JS随机密码生成算法
Sep 23 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
paypal即时到账php实现代码
2010/11/28 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
layui实现数据分页功能
2019/07/27 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
年终考核评语
2014/01/19 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
优秀教师主要事迹
2014/02/01 职场文书
运动会入场词100字
2014/02/06 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
优秀广告词大全
2014/03/19 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
委托公证书格式
2015/01/26 职场文书
综合测评个人总结
2015/03/03 职场文书
初中英语教学反思范文
2016/02/15 职场文书