基于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 相关文章推荐
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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人民币金额数字转中文大写的函数代码
2013/02/27 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
微信小程序实现滚动消息通知
2018/02/02 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python命名空间详解
2014/08/18 Python
理解Python中函数的参数
2015/04/27 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python pygame实现2048游戏
2018/11/20 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
在python shell中运行python文件的实现
2019/12/21 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
python实现学生通讯录管理系统
2021/02/25 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
年终考核评语
2014/01/19 职场文书
五年级作文之想象作文
2019/10/30 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang