基于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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
DWR Ext 加载数据
Mar 22 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
Three.js快速入门教程
Sep 09 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Angular排序实例详解
Jun 28 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
十大“创意”战术!
2020/03/04 星际争霸
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP生成plist数据的方法
2015/06/16 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
先进事迹材料范文
2014/12/29 职场文书
生活委员竞选稿
2015/11/21 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers
正则表达式基础与常用验证表达式
2022/06/16 Javascript