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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
AngularJS内置指令
Feb 04 Javascript
Jquery注册事件实现方法
May 18 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP 手机归属地查询 api
2010/02/08 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
修改发贴的编辑功能
2007/03/07 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
解决option标签selected="selected"属性失效的问题
2017/11/06 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python中随机函数random用法实例
2015/04/30 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
解决python 找不到module的问题
2020/02/12 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
金属材料工程个人求职的自我评价
2013/12/04 职场文书
出国留学计划书
2014/04/27 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
党内外群众意见范文
2015/06/02 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
html粘性页脚的具体使用
2022/01/18 HTML / CSS
SpringBoot详解执行过程
2022/07/15 Java/Android