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+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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的ZipArchive类用法实例
2014/10/20 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
Python程序语言快速上手教程
2012/07/18 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python对Excel的读取的示例代码
2020/02/14 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
介绍一下游标
2012/01/10 面试题
学术会议欢迎词
2014/01/09 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
三十年同学聚会感言
2015/07/30 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
关于 Python json中load和loads区别
2021/11/07 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL