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 页面 Mask实现代码
Jan 09 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
Node.js编码规范
Jul 14 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
js实现课堂随机点名系统
Nov 21 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php使用websocket示例详解
2014/03/12 PHP
php中opendir函数用法实例
2014/11/15 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
详解php协程知识点
2018/09/21 PHP
PHP实现微信对账单处理
2018/10/01 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
python日志模块logbook使用方法
2019/09/19 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Python设计密码强度校验程序
2020/07/30 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
结构工程研究生求职信
2013/10/13 职场文书
图书室标语
2014/06/21 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
大学生读书笔记范文
2015/07/01 职场文书
八年级作文之感恩
2019/11/22 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL