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重建星际争霸
Dec 22 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
jQuery拖动图片删除示例
May 10 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 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
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python创建xml文件示例
2017/03/22 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
艺术用品:Arteza
2018/11/25 全球购物
就业自荐书
2013/12/05 职场文书
表扬信格式
2014/01/12 职场文书
经销商年会策划方案
2014/05/29 职场文书
学生自我评语
2015/01/04 职场文书
公诉意见书范文
2015/06/05 职场文书
运动会观后感
2015/06/09 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js