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 全选与全取消功能的实现代码
Dec 23 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
JavaScript SHA512&SHA256加密算法详解
2015/08/11 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
委托书样本
2014/04/02 职场文书
产品质量保证书
2014/04/29 职场文书
绿色小区申报材料
2014/08/22 职场文书
教师求职自荐信范文
2015/03/04 职场文书
校友会致辞
2015/07/30 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python如何在word中存储本地图片
2021/04/07 Python
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
Mysql 文件配置解析介绍
2022/05/06 MySQL