基于JS判断对象是否是数组


Posted in Javascript onJanuary 10, 2020

这篇文章主要介绍了基于JS判断对象是否是数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1、通过instanceof判断

instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值。

let a = [];
a instanceof Array; //true
let b = {};
b instanceof Array; //false

在上方代码中,instanceof运算符检测Array.prototype属性是否存在于变量a的原型链上,显然a是一个数组,拥有Array.prototype属性,所以为true。

需要注意的是,prototype属性是可以修改的,所以并不是最初判断为true就一定永远为真。

其次,当我们的脚本拥有多个全局环境,例如html中拥有多个iframe对象,instanceof的验证结果可能不会符合预期,例如:

//为body创建并添加一个iframe对象
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
//取得iframe对象的构造数组方法
xArray = window.frames[0].Array;
//通过构造函数获取一个实例
var arr = new xArray(1,2,3); 
arr instanceof Array;//false

导致这种问题是因为iframe会产生新的全局环境,它也会拥有自己的Array.prototype属性,让不同环境下的属性相同很明显是不安全的做法,所以Array.prototype !== window.frames[0].Array.prototype,想要arr instanceof Array为true,你得保证arr是由原始Array构造函数创建时才可行。

2、通过constructor判断

我们知道,实例的构造函数属性constructor指向构造函数,那么通过constructor属性也可以判断是否为一个数组。

let a = [1,3,4];
a.constructor === Array;//true

同样,这种判断也会存在多个全局环境的问题,导致的问题与instanceof相同。

3、通过Object.prototype.toString.call()判断

Object.prototype.toString().call()可以获取到对象的不同类型,多个全局环境也适用

// 检验是否是数组
 let a = [1,2,3]
 Object.prototype.toString.call(a) === '[object Array]';//true
 //检验是否是函数
 let b = function () {};
 Object.prototype.toString.call(b) === '[object Function]';//true
 //检验是否是数字
 let c = 1;
 Object.prototype.toString.call(c) === '[object Number]';//true

4、通过Array.isArray()判断

简单好用,而且对于多全局环境,Array.isArray() 同样能准确判断,但有个问题,Array.isArray() 是在ES5中提出,也就是说在ES5之前可能会存在不支持此方法的情况。

let a = [1,2,3]
Array.isArray(a);//true

最终推荐方法

if (!Array.isArray) {
 Array.isArray = function(arg) {
  return Object.prototype.toString.call(arg) === '[object Array]';
 };
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
初识Node.js
Mar 20 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
详解A标签中href=""的几种用法
Aug 20 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
JS数组属性去重并校验重复数据
Jan 10 #Javascript
JS图片懒加载的优点及实现原理
Jan 10 #Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
js实现旋转木马轮播图效果
Jan 10 #Javascript
微信小程序新闻网站详情页实例代码
Jan 10 #Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 #Javascript
You might like
PHP 数组实例说明
2008/08/18 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
酒店大堂副理的职责范文
2014/02/13 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
捐款通知怎么写
2015/04/24 职场文书
运动会致辞稿
2015/07/29 职场文书
高中班主任心得体会
2016/01/07 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
实战Python爬虫爬取酷我音乐
2022/04/11 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android