基于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中null与undefined分析
Jul 25 Javascript
ASP Json Parser修正版
Dec 06 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
smarty简单分页的实现方法
2014/10/27 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php自定义时间转换函数示例
2016/12/07 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
javascript操作数组详解
2014/12/17 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
谈谈python中GUI的选择
2018/03/01 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
浅谈Python协程
2020/06/17 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
AJax面试题
2014/11/25 面试题
就业自我评价
2014/02/04 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技