判断一个变量是数组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 相关文章推荐
js href的用法
May 13 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
js实现弹窗效果
Aug 09 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
php动态生成JavaScript代码
2009/03/09 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Django stark组件使用及原理详解
2019/08/22 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Python批量启动多线程代码实例
2020/02/18 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
初中生学习的自我评价
2013/11/14 职场文书
企业军训感想
2014/02/07 职场文书
爱护公共设施标语
2014/06/24 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2014年导购员工作总结
2014/11/18 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS