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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
jQuery参数列表集合
Apr 06 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
easyui-datagrid开发实践(总结)
Aug 02 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
JavaScript显式数据类型转换详解
Mar 18 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
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP调用其他文件中的类
2018/04/02 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
puppeteer库入门初探
2019/01/09 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python中函数参数调用方式分析
2018/08/09 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
网管求职信
2014/03/03 职场文书
德语专业求职信
2014/03/12 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫