基于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 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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 中执行系统外部命令
2006/10/09 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
javaScript中"=="和"==="的区别详解
2018/03/16 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python常用模块用法分析
2014/09/08 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Python模块相关知识点小结
2020/03/09 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
酒店副总岗位职责
2013/12/24 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2014年客房部工作总结
2014/11/22 职场文书
罚款通知怎么写
2015/04/22 职场文书
大学班长竞选稿
2015/11/20 职场文书
节水宣传标语口号
2015/12/26 职场文书
python实现网络五子棋
2021/04/11 Python