基于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中window.showModalDialog()用法详解
Dec 18 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 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字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP类的反射用法实例
2014/11/03 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
激活 ActiveX 控件
2006/10/09 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Django Admin实现上传图片校验功能
2016/03/06 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
pandas 数据类型转换的实现
2020/12/29 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
师范大学毕业自我鉴定
2013/11/21 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
高三历史教学反思
2014/01/09 职场文书
投标单位介绍信
2014/01/09 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
家长会学生演讲稿
2014/04/26 职场文书
大学生应聘求职信
2014/05/26 职场文书
生产车间标语
2014/06/11 职场文书
春节随笔
2015/08/15 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python