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获取用户本地图片路径并显示的代码
Feb 16 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
详解js的视频和音频采集
Aug 09 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
基于php无限分类的深入理解
2013/06/02 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php查看当前Session的ID实例
2015/03/16 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
JavaScript 调试器简介
2009/02/21 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
如何根据业务封装自己的功能组件
2019/04/19 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
一套软件测试笔试题
2014/07/25 面试题
简单的项目建议书模板
2014/03/12 职场文书
公司委托书格式范文
2014/04/04 职场文书
业务内勤岗位职责
2014/04/30 职场文书
会议邀请函
2015/01/30 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
Python入门之基础语法详解
2021/05/11 Python