前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JS】501- 一文学会判断变量是否为数组

【JS】501- 一文学会判断变量是否为数组

作者头像
pingan8787
发布2020-02-19 15:12:16
8580
发布2020-02-19 15:12:16
举报
文章被收录于专栏:前端自习课前端自习课

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

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

一、常用方法

1. Object.prototype.toString

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

代码语言:javascript
复制
let arr = [1,2,3], obj = {name: "leo"};
function isArray(a){
    return Object.prototype.toString.call(a)==='[object Array]';
}
isArray(arr); // true
isArray(obj); // false

2. Array.isArray(arr)

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

代码语言:javascript
复制
let arr = [1,2,3], obj = {name: "leo"};
Array.isArray(arr); // true
Array.isArray(obj); // false

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

代码语言:javascript
复制
if(!Array.isArray){
    Array.isArray = function(a){
        return Object.prototype.toString.call(a)==='[object Array]'
    }
}

二、不够准确的方法

1. 原型链

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

代码语言:javascript
复制
let arr = [1,2,3], obj = {name: "leo"};
arr.__proto__.constructor === Array; // true
obj.__proto__.constructor === Array; // true

arr.constructor === Array;  //true
obj.constructor === Array;  //true

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

代码语言:javascript
复制
let arr = [1,2,3], obj = {name: "leo"};
arr.constructor === Array // true
obj.constructor === Array // false

obj.constructor = Array;
obj.constructor === Array // true

2. instanceof

简单使用 instanceof 如下:

代码语言:javascript
复制
let arr = [1,2,3], obj = {name: "leo"};
arr instanceof Array; // true
obj instanceof Array; // false

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

代码语言:javascript
复制
let iframe = document.createElement('iframe');
document.body.appendChild(iframe);

let arr = [1,2,3];
myArray = window.frames[0].Array;
let myArr = new myArray(4,5,6);

myArr instanceof Array;    //false
myArr.constructor == Array;// false

Array.prototype == myArray.prototype); //false
arr instanceof myArray); //false

myArr.constructor === Array;  // false
arr.constructor === Array;    // true
myArr.constructor === myArray;// true
Array.isArray(arrx);  //true

三、错误的方法

1. typeof

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

代码语言:javascript
复制
let arr = [1,2,3], obj = {name: "leo"};
typeof arr; // "object"
typeof obj; // "object"

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

typeof 的一些判断结果:

代码语言:javascript
复制
// 基本类型
typeof 123;   //number
typeof "leo"; //string
typeof true;  //boolean
typeof undefined; //undefined
typeof null;  //object
let leo = Symbol;
typeof leo;   //symbol

// 引用类型
typeof [1,2,3]; //object
typeof {};      //object
typeof function(){}; //function
typeof Array;   //function  Array类型的构造函数
typeof Object;  //function  Object类型的构造函数
typeof Symbol;  //function  Symbol类型的构造函数
typeof Number;  //function  Number类型的构造函数
typeof String;  //function  String类型的构造函数
typeof Boolean; //function  Boolean类型的构造函数

四、总结

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

参考文章

《判断是否是数组的几种方法》

https://juejin.im/post/5be52b1ae51d450b3647e766

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-02-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端自习课 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、常用方法
    • 1. Object.prototype.toString
      • 2. Array.isArray(arr)
      • 二、不够准确的方法
        • 1. 原型链
          • 2. instanceof
          • 三、错误的方法
            • 1. typeof
            • 四、总结
            • 参考文章
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档