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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
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
Protoss兵种对照表
2020/03/14 星际争霸
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
JS实现li标签的删除
2019/04/12 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Python 常用模块 re 使用方法详解
2019/06/06 Python
python3 使用traceback定位异常实例
2020/03/09 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
自我推荐书
2013/12/04 职场文书
网络教育自我鉴定
2014/02/04 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
小学庆六一活动方案
2014/02/28 职场文书
高中军训感言600字
2014/03/11 职场文书
督导岗位职责
2015/02/04 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android