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 回调函数中变量作用域的讨论
Sep 11 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
js验证上传图片的方法
May 12 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
vue 文件目录结构详解
Nov 24 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
ajax php 实现写入数据库
2009/09/02 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
php curl发送请求实例方法
2019/08/01 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
大学生职业生涯规划范文
2014/01/08 职场文书
高中政治教学反思
2014/01/18 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
英文邀请函
2015/02/02 职场文书
农业项目投资意向书
2015/05/09 职场文书
关于童年的读书笔记
2015/06/26 职场文书
python 命令行传参方法总结
2021/05/25 Python