JavaScript判断对象是否为数组


Posted in Javascript onDecember 22, 2015

文中为大家分享了三种JavaScript判断对象是否为数组的方法,

1. typeof

首先我们会想到的是使用typeof来检测数据类型,但是对于Function, String, Number, Undefined等这几种基本类型来说,使用typeof来检测都可以检测到,比如代码如下:

function test(){}
console.log(typeof 1); // number
console.log(typeof test); // function 
console.log(typeof "yunxi"); // string
console.log(typeof undefined); // undefined

但是对于数组或者正则来说,使用typeof来检测的话,那就满足不了,因为当我们检测数组或者正则的话,那么返回的类型将会是一个对象object,如下代码所示:

console.log(typeof []); // object
console.log(typeof /\d+/g); // object

2. Instanceof

由此我们很容易会想到使用instanceof来检测某个对象是否是数组的实例,该检测会返回一个布尔型(boolean),如果是数组的话,返回true,否则的话返回false;我们再来看下上面的检测是否为数组的代码如下:

console.log([] instanceof Array); // true
console.log(/\d+/g instanceof Array); // false

如上可以看到使用instanceof确实可以判断是否为数组的列子;
3. constructor属性

在javascript中,每个对象都有一个constructor属性,它引用了初始化该对象的构造函数,比如判断未知对象的类型,因此我们可以如下写一个方法,代码如下:

function isArray(obj) {
  return typeof obj == 'object' && obj.constructor == Array
}
// 测试demo
console.log(isArray([])); // true
var a = {"a":1};
console.log(isArray(a)); // false

var b = [1,2,3];
console.log(isArray(b)); // true
console.log(isArray(/\d+/g));// false

如上可以看到,通过调用isArray 方法也可以判断是否为数组的列子。
我们现在可以看到,对于第二点和第三点分别使用instanceof方法和constructor属性貌似都可以来判断是否为数组了,但是也有列外情况,比如在跨框架iframe的时候使用页面中的数组时,会失败,因为在不同的框架iframe中,创建的数组是不会相互共享其prototype属性的;如下代码测试即可得到验证~

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;    
var arr = new xArray("1","2","3","4","5");
//这个写法IE下是不支持的,标准浏览器firefox,chrome下有

console.log(arr); // 打印出 ["1", "2", "3", "4", "5"]
console.log(arr instanceof Array); // false 
console.log(arr.constructor === Array); // false

如上的方法我们都不能来判断一个对象是否为数组的方式; 但是我们在看ECMA262中可以看到,可以使用 Object.prototype.toString.call()方法来判断一个对象是否为数组;如下代码:

function isArray(obj) {
  return Object.prototype.toString.call(obj) == '[object Array]';
}
// 代码调用
console.log(isArray([])); // true
console.log(isArray([1,2,3])); // true

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;    
var arr = new xArray("1","2","3","4","5");

console.log(arr); // ["1","2","3","4","5"]
console.log(isArray(arr)); // true

以上就是本文的全部内容,帮助大家学习JavaScript判断对象是否为数组的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
javascript中类的定义方式详解(四种方式)
Dec 22 #Javascript
jquery获取select选中值的方法分析
Dec 22 #Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 #Javascript
点评js异步加载的4种方式
Dec 22 #Javascript
JS模拟按钮点击功能的方法
Dec 22 #Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 #Javascript
js实现仿微博滚动显示信息的效果
Dec 21 #Javascript
You might like
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
xml和web特殊字符
2009/04/28 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
深入理解python中的atexit模块
2017/03/07 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
python中如何设置代码自动提示
2020/07/15 Python
CSS3 边框效果
2019/11/04 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
医学专业毕业生个人的求职信
2013/12/04 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
安全横幅标语
2014/06/09 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
保卫工作个人总结
2015/03/03 职场文书
城南旧事电影观后感
2015/06/16 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python