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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
window.location和document.location的区别分析
Dec 23 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
Highcharts入门之简介
Aug 02 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
详解vue 组件的实现原理
Nov 12 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
php 图片上传类代码
2009/07/17 PHP
header导出Excel应用示例
2014/01/24 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
php中this关键字用法分析
2016/12/07 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python图像处理之镜像实现方法
2015/05/30 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
单位消防安全制度
2014/01/12 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL