判断一个变量是数组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基础知识filter()和find()实例说明
Jul 06 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
浅谈js中的闭包
Mar 16 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
Vue父子之间值传递的实例教程
Jul 02 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JavaScript 防盗链的原理以及破解方法
Dec 29 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中strtotime函数用法详解
2014/11/15 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
详解Vue打包优化之code spliting
2018/04/09 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
python处理大数字的方法
2015/05/27 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
大学生水果店创业计划书
2014/01/28 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
全民创业工作总结
2015/08/13 职场文书
七年级思品教学反思
2016/02/20 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python