基于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里面的几种选择器 查找满足条件的元素$("#控件ID")
Aug 23 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
js闭包实例汇总
Nov 09 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 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
PHP 5.3.0 安装分析心得
2009/08/07 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
php实现算术验证码功能
2018/12/05 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
浏览器兼容的JS写法总结
2016/04/27 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python切换hosts文件代码示例
2013/12/31 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
外贸业务员求职信
2014/06/16 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
中学音乐课教学反思
2016/02/18 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python