JavaScript判断数组类型的方法


Posted in Javascript onOctober 23, 2019

前言

JavaScript中关于数组的判定问题,一直都是一个必须要掌握的点,那么,运用知识,如何判断一个类型是数组,就需要有对JavaScript使用有着深入的了解。

判断方法

一、Array.isArray

ES5新增的数组方法,Array.isArray应该是我们最先想到的判定方式,现在应用的也比较广泛。

const arr = [1,2,3,4]
Array.isArray(arr)  // true

如果是在支持ES5的浏览器中,用这样的方式自然没什么问题,但是如果是在IE9以下版本,这个方法并未受到支持,这时候我们就要用别的方式来判断数组。

二、instanceof

一般来说,instanceof关键字,是用来判断某个元素是否某对象构造函数实例。在数组判断上,instanceof关键字也可以进行数组的判定。

const arr = [1, 2, 3, 4]
arr instanceof Array  // true

instanceof支持的浏览器版本比较多,所以一般来说,用instanceof判断,会比Array.isArray判定的范围要广泛。

三、toString

对象的toString方式也可以判定数组类型,一般来说这种方式的判定是各大库的一种Array.isArray的代替实现。

例如,polyfill中,就是如此实现:

if (!Array.isArray) {
 Array.isArray = function(arg) {
  return Object.prototype.toString.call(arg) === '[object Array]';
 };
}

const arr = [1, 2, 3, 4]
Object.prototype.toString.call(arr) === '[Object Array]'  // true

四、constructor

除了以上的方式之外,我们还可以通过构造函数来判定:

const arr = [1, 2, 3, 4]
arr.constructor === Array // true
arr.__proto__.constructor === Array //true

弊端

instanceof和constructor的判定也存在一些弊端,他们判定的数组必须定义在同一个页面,否则将会判定为false。

如果在iframe中的数组判定,就会出错。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr); // true
// Considered harmful, because doesn't work through iframes
arr instanceof Array; // false
arr.constructor === Array; // false

总结

由上述几个方法判定,可以得出,其实polyfill的判定是最合理的,也最具有兼容性的一种判定。

利用toString判定,胜出。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Vue 进阶之路(三)
Apr 18 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
iview form清除校验状态的实现
Sep 19 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 #Javascript
p5.js绘制旋转的正方形
Oct 23 #Javascript
p5.js实现简单货车运动动画
Oct 23 #Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 #Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 #Javascript
p5.js临摹旋转爱心
Oct 23 #Javascript
JavaScript 作用域scope简单汇总
Oct 23 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php计算title标题相似比的方法
2015/07/29 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
Node.js使用Express.Router的方法
2017/11/14 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python实现按任意键继续执行程序
2016/12/30 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Python如何生成xml文件
2020/06/04 Python
python Selenium 库的使用技巧
2020/10/16 Python
python推导式的使用方法实例
2021/02/28 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
公司财务自我评价分享
2013/12/17 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
繁星春水读书笔记
2015/06/30 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
养成教育工作总结
2015/08/13 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript