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封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
javaScript基础语法介绍
Feb 28 Javascript
Bootstrap精简教程
Nov 27 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
python生成词云的实现方法(推荐)
2017/06/13 Python
解决DataFrame排序sort的问题
2018/06/07 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
师范大学应届生求职信
2013/11/21 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
政协常委会议主持词
2015/07/03 职场文书
医院保洁员管理制度
2015/08/05 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技