基于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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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 文件上传全攻略
2010/04/28 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php实现单链表的实例代码
2013/03/22 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
nodejs教程之环境安装及运行
2014/11/21 NodeJs
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
JS实现放大镜效果
2020/09/21 Javascript
使用python为mysql实现restful接口
2018/01/05 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
业务经理岗位职责
2013/11/11 职场文书
无故旷工检讨书
2014/01/26 职场文书
《掌声》教学反思
2014/02/23 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Python pygame实现中国象棋单机版源码
2021/06/20 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Python采集股票数据并制作可视化柱状图
2022/04/04 Python