判断一个变量是数组Array类型的方法


Posted in Javascript onSeptember 16, 2013

在很多时候,我们都需要对一个变量进行数组类型的判断。JavaScript中如何判断一个变量是数组Array类型呢?我最近研究了一下,并分享给大家,希望能对大家有所帮助。

JavaScript中检测对象的方法
1.typeof操作符
这种方法对于一些常用的类型来说那算是毫无压力,比如Function、String、Number、Undefined等,但是要是检测Array的对象就不起作用了。

alert(typeof null); // "object" 
alert(typeof function () { 
return 1; 
}); // "function" 
alert(typeof '梦龙小站'); // "string" 
alert(typeof 1); // "number" 
alert(typeof a); // "undefined" 
alert(typeof undefined); // "undefined" 
alert(typeof []); // "object"

2.instanceof操作符
这个操作符和JavaScript中面向对象有点关系,了解这个就先得了解JavaScript中的面向对象。因为这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。
var arr = [1,2,3,1];
alert(arr instanceof Array); // true
3.对象的constructor属性
除了instanceof,每个对象还有constructor的属性,利用它似乎也能进行Array的判断。
var arr = [1,2,3,1]; 
alert(arr.constructor === Array); // true

第2种和第3种方法貌似无懈可击,但是实际上还是有些漏洞的,当你在多个frame中来回穿梭的时候,这两种方法就亚历山大了。由于每个iframe都有一套自己的执行环境,跨frame实例化的对象彼此是不共享原型链的,因此导致上述检测代码失效!
var iframe = document.createElement('iframe'); //创建iframe 
document.body.appendChild(iframe); //添加到body中 
xArray = window.frames[window.frames.length-1].Array; 
var arr = new xArray(1,2,3); // 声明数组[1,2,3] 
alert(arr instanceof Array); // false 
alert(arr.constructor === Array); // false

检测数组类型方法
以上那些方法看上去无懈可击,但是终究会有些问题,接下来向大家提供一些比较不错的方法,可以说是无懈可击了。
1.Object.prototype.toString
Object.prototype.toString的行为:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这 个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。
function isArrayFn (o) { 
return Object.prototype.toString.call(o) === '[object Array]'; 
} 
var arr = [1,2,3,1]; 
alert(isArrayFn(arr));// true

call改变toString的this引用为待检测的对象,返回此对象的字符串表示,然后对比此字符串是否是'[object Array]',以判断其是否是Array的实例。为什么不直接o.toString()?嗯,虽然Array继承自Object,也会有 toString方法,但是这个方法有可能会被改写而达不到我们的要求,而Object.prototype则是老虎的屁股,很少有人敢去碰它的,所以能一定程度保证其“纯洁性”:)

JavaScript 标准文档中定义: [[Class]] 的值只可能是下面字符串中的一个: Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String.
这种方法在识别内置对象时往往十分有用,但对于自定义对象请不要使用这种方法。
2.Array.isArray()
ECMAScript5将Array.isArray()正式引入JavaScript,目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。
3.较好参考
综合上面的几种方法,有一个当前的判断数组的最佳写法:

var arr = [1,2,3,1]; 
var arr2 = [{ abac : 1, abc : 2 }]; 
function isArrayFn(value){ 
if (typeof Array.isArray === "function") { 
return Array.isArray(value); 
}else{ 
return Object.prototype.toString.call(value) === "[object Array]"; 
} 
} 
alert(isArrayFn(arr));// true 
alert(isArrayFn(arr2));// true

JavaScript中如何判断一个变量是数组Array类型呢?以上便是我为大家分享的JavaScript中判断一个变量是数组Array类型的方法,希望能对大家有所帮助。
Javascript 相关文章推荐
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
jquery实现div阴影效果示例代码
Sep 16 #Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 #Javascript
document.documentElement和document.body区别介绍
Sep 16 #Javascript
使用js在页面中绘制表格核心代码
Sep 16 #Javascript
Function.prototype.bind用法示例
Sep 16 #Javascript
javascript简单事件处理和with用法介绍
Sep 16 #Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
Sep 16 #Javascript
You might like
11个PHP 分页脚本推荐
2011/08/15 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python实现顺时针打印矩阵
2019/03/02 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
2014年会计个人工作总结
2014/11/24 职场文书
监察建议书
2015/02/04 职场文书
毕业生个人总结
2015/02/28 职场文书
深入理解python多线程编程
2021/04/18 Python