日常开发中,我们经常遇到这种情况,需要我们判断变量是否是一个数组类型。

那么今天我把常用的判断变量是否是数组类型的方法,整理在这里:

一、常用方法

1. Object.prototype.toString

通常我们可以使用 Object.prototype.toString 方法进行判断,详细可以查看《Object.prototype.toString() - MDN - Mozilla》

  1. let arr = [1,2,3], obj = {name: "leo"};
  2. function isArray(a){
  3. return Object.prototype.toString.call(a)==='[object Array]';
  4. }
  5. isArray(arr); // true
  6. isArray(obj); // false

2. Array.isArray(arr)

Array.isArray(arr) 方法使用起来很简单:

  1. let arr = [1,2,3], obj = {name: "leo"};
  2. Array.isArray(arr); // true
  3. Array.isArray(obj); // false

需要注意的是 Array.isArray(arr) 方法虽然简单,但是存在兼容性问题,Array.isArray是ES 5.1推出的,不支持IE6~8,所以在使用的时候也应注意兼容问题。

  1. if(!Array.isArray){
  2. Array.isArray = function(a){
  3. return Object.prototype.toString.call(a)==='[object Array]'
  4. }
  5. }

二、不够准确的方法

1. 原型链

使用原型链判断也比较简单:

  1. let arr = [1,2,3], obj = {name: "leo"};
  2. arr.__proto__.constructor === Array; // true
  3. obj.__proto__.constructor === Array; // true
  4. arr.constructor === Array; //true
  5. obj.constructor === Array; //true

但是之所以说 constructor 不够准确,是因为在不同执行环境下, constructor 判断会不正确。
比如下面这种情况,我们重写 constructor

  1. let arr = [1,2,3], obj = {name: "leo"};
  2. arr.constructor === Array // true
  3. obj.constructor === Array // false
  4. obj.constructor = Array;
  5. obj.constructor === Array // true

2. instanceof

简单使用 instanceof 如下:

  1. let arr = [1,2,3], obj = {name: "leo"};
  2. arr instanceof Array; // true
  3. obj instanceof Array; // false

但是 instanceof 也存在局限性,它必须在当前页面声明,如父页面中存在一个 iframe,并且 iframe 中引用了一个子页面,在子页面中声明了一个 arr ,并将其赋值给父页面的一个变量,这时判断该变量,Array == object.constructor; 会返回 false;

  1. let iframe = document.createElement('iframe');
  2. document.body.appendChild(iframe);
  3. let arr = [1,2,3];
  4. myArray = window.frames[0].Array;
  5. let myArr = new myArray(4,5,6);
  6. myArr instanceof Array; //false
  7. myArr.constructor == Array;// false
  8. Array.prototype == myArray.prototype); //false
  9. arr instanceof myArray); //false
  10. myArr.constructor === Array; // false
  11. arr.constructor === Array; // true
  12. myArr.constructor === myArray;// true
  13. Array.isArray(arrx); //true

三、错误的方法

1. typeof

typeof 是无法判断是否是数组的:

  1. let arr = [1,2,3], obj = {name: "leo"};
  2. typeof arr; // "object"
  3. typeof obj; // "object"

所以可以看出, typeof 适合用来判断基本数据类型

typeof 的一些判断结果:

  1. // 基本类型
  2. typeof 123; //number
  3. typeof "leo"; //string
  4. typeof true; //boolean
  5. typeof undefined; //undefined
  6. typeof null; //object
  7. let leo = Symbol;
  8. typeof leo; //symbol
  9. // 引用类型
  10. typeof [1,2,3]; //object
  11. typeof {}; //object
  12. typeof function(){}; //function
  13. typeof Array; //function Array类型的构造函数
  14. typeof Object; //function Object类型的构造函数
  15. typeof Symbol; //function Symbol类型的构造函数
  16. typeof Number; //function Number类型的构造函数
  17. typeof String; //function String类型的构造函数
  18. typeof Boolean; //function Boolean类型的构造函数

四、总结

本文主要给大家从三个角度去介绍一些判断变量是否是数组的方法,在日常开发中【一、常见方法】中的 2 个方法,已经足够我们使用了,也建议使用这 2 种方法。

参考文章