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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
Vue 数据绑定的原理分析
Nov 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
在PWS上安装PHP4.0正式版
2006/10/09 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
决策树的python实现方法
2014/11/18 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
房产继承公证书
2014/04/09 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
防溺水主题班会教案
2015/08/12 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
SQL基础的查询语句
2021/11/11 MySQL