JavaScript中如何判断数组类型

前言

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判定,胜出。

我的博客:http://www.gaoyunjiao.fun/?p=165

原文地址:https://www.cnblogs.com/qixingduanyan/p/11725557.html

时间: 2024-08-28 23:20:25

JavaScript中如何判断数组类型的相关文章

JavaScript根据文件名判断文件类型

//JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",".bmp",".gif");//图片文件的后缀名 var docExt = new Array(".doc",".docx");//word文件的后缀名 var xlsExt = new Array(".xls"

javascript中的隐式类型转化

javascript中的隐式类型转化 #隐式转换 ## "+" 字符串和数字 如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作. 如果其中一个操作数是对象(包括数组),则首先对其调用`ToPrimitive`抽象操作,该抽象操作再调用`[[DefaultValue]]`,以数字作为上下文. `[1,2]+[3,4]=='1,23,4'` 原因,因为数组的valueOf操作无法得到简单的基本类型,于是它转而调用toString.因此上栗得到的是'1,23,4'

Javascript中的Array(数组) 、{}(映射) 与JSON解析

做网页总会使用javascript,使用javascript总会使用JSON.最近用到一下,就写写. 下面是总结: 1.将javascript中的Array和{}转化为json字符串可以使用json2.js,源码地址https://github.com/douglascrockford/JSON-js. 2.将json字符串转为javascript对象,可以使用javascript自带的eval函数. 3.javascript中可以使用typeof查看变量的类型. 4.要访问json字段,必须是

JavaScript中正则表达式判断匹配规则以及常用的方法

JavaScript中正则表达式判断匹配规则以及常用的方法: 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它"匹配"了. \d可以匹配一个数字                 '00\d'可以匹配'007' ,'\d\d\d'可以匹配'010' \w可以匹配一个字母或数字      '\w\w'可以匹配'js' \s可

javascript中字符串和数组的相互转换

javascript中字符串和数组的相互转换:字符串和数组的相互转换操作是非常的重要的,因为在实际编码过程中会经常用到,所以这是必须要掌握的知识点,当然这个知识点并不难,知道了就永远知道了,并不是那种需要充分实践才能够掌握的东西,下面就做一下简单的介绍.一.字符串转换为数组:此操作会用到split()函数,它能够以指定的字符作为分隔符,将字符串转换成一个数组,实例代码如下: var Str="abc-mng-zhang-mayi"; var newArray=Str.split(&qu

JavaScript中常见的数组操作函数及用法

昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下,这样方便大家准备参考.如果恰好你也在准备各种笔试,希望对你有所帮助.同时,也欢迎补充. 1.数组创建 创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下: var array1 = new Array(); var array2 = []; 上面是创建数组的最常见的两种方法,其中第二种方法因为简单直观而被开发者推崇.其中,

JavaScript中的伪数组理解

看过jQuery源码的人都知道类数组对象,与我们熟知的arguments对象很像 构造一个类数组必须有两个条件 第一个条件:你必须给对象定义个splice方法,只要他是一个function就可以 第二个条件:就是赋值一个length属性,或者增加push,unshift,shift,pop其中任何一个方法,并且调用了一次. 当这两个条件同时满足那么当前的对象在控制台输出后跟数组的格式一模一样. 一般而言大部分都是这样构造一个类数组对象(jQuery就是这么干的).因为相比而言,这样更简洁,并且更

java 实现往oracle存储过程中传递array数组类型的参数

注:本文来源于 <  java 实现往oracle存储过程中传递array数组类型的参数  > 最近项目中遇到通过往存储过程传递数组参数的问题, 浪费了N多个小时,终于有点头绪. 具体的代码就不写上了,因为项目中存储过程的调用方法全部是封装好的(好像现在都这样,都姓3层,嘿嘿) 原理: 1.一维数组 A.单纯的一维数组的话,直接建立一个table类型就可以 1 TYPE TYPE_VARCHAR AS TABLE OF VARCHAR2(200); 2.多维数组 A.多维数组就要稍加修改了,如

JavaScript中如何判断变量是数组、函数或是对象类型

数组 ECMAScript5中Array.isArray是原生的判断数组的方法,IE9及以上支持.考虑到兼容性,在没有此方法的浏览器中,可以使用 Object.prototype.toString.call(obj) === '[object Array]'替代. var isArray = Array.isArray || function(obj) {     return Object.prototype.toString.call(obj) === '[object Array]'; }