基于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代码
Sep 06 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
Nov 28 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 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
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
小程序实现留言板
2018/11/02 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
详解vue高级特性
2020/06/09 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python GUI编程完整示例
2019/04/04 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python timeit模块原理及使用方法
2020/10/10 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
师德师风建设方案
2014/05/08 职场文书
学习礼仪心得体会
2014/09/01 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
销售员自我评价
2015/03/11 职场文书
初中班长竞选稿
2015/11/20 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
php去除数组中为0的元素的实例分析
2021/11/17 PHP
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
python脚本框架webpy模板控制结构
2021/11/20 Python