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 IE 与 FF中兼容问题小结
Feb 18 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
Java中Timer的用法详解
Oct 21 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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获取服务器端信息的方法
2014/11/28 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Python 除法小技巧
2008/09/06 Python
python中类的一些方法分析
2014/09/25 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
多个应用共存的Django配置方法
2018/05/30 Python
django主动抛出403异常的方法详解
2019/01/04 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
高中生自我评语大全
2014/01/19 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
会计人员岗位职责
2015/02/03 职场文书
居安思危观后感
2015/06/11 职场文书