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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
动态改变textbox的宽高的js
Oct 26 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
Vue生命周期示例详解
Apr 12 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
理解JavaScript中的对象
Aug 25 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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
PHP实现八皇后算法
2019/05/06 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL