基于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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
javascript iframe跨域详解
Oct 26 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
React-router4路由监听的实现
Aug 07 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 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多文件上传类实例
2015/03/07 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
从零学Python之入门(三)序列
2014/05/25 Python
跟老齐学Python之集合的关系
2014/09/24 Python
Python装饰器decorator用法实例
2014/11/10 Python
Python pickle模块用法实例分析
2015/05/27 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
物流专业求职信
2014/06/30 职场文书
祝寿主持词
2015/07/02 职场文书
如何做好工作总结!
2019/04/10 职场文书
检讨书怎么写?
2019/06/21 职场文书