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 相关文章推荐
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
js实现弹窗猜数字游戏
Nov 26 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
Python最长公共子串算法实例
2015/03/07 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Python并行分布式框架Celery详解
2018/10/15 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
追悼会子女答谢词
2014/01/28 职场文书
英语教学随笔感言
2014/02/20 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
2014庆六一活动方案
2014/03/02 职场文书
生日宴会策划方案
2014/06/03 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
父亲节活动总结
2015/02/12 职场文书
开学第一周值周总结
2015/07/16 职场文书
新郎结婚感言
2015/07/31 职场文书
宾馆卫生管理制度
2015/08/06 职场文书