基于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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
简单了解vue 插值表达式Mustache
Jul 22 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python代码实现ID3决策树算法
2017/12/20 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python实现手机销售管理系统
2019/03/19 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
室内拓展活动方案
2014/02/13 职场文书
股指期货心得体会
2014/09/10 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
写给老师的感谢信
2015/01/20 职场文书
运动会闭幕词
2015/01/28 职场文书
教师教育心得体会
2016/01/19 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS