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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
js异常捕获方法介绍
Apr 10 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 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的session cookie错误
2009/08/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php文件操作实例代码
2012/05/10 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
小谈angular ng deploy的实现
2020/04/07 Javascript
Python 异常处理的实例详解
2017/09/11 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
幼儿教师考核制度
2014/01/25 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
保护环境倡议书500字
2014/05/19 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP