zoukankan      html  css  js  c++  java
  • 【JS】501- 一文学会判断变量是否为数组

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

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

    一、常用方法

    1. Object.prototype.toString

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

    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) 方法使用起来很简单:

    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,所以在使用的时候也应注意兼容问题。

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

    二、不够准确的方法

    1. 原型链

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

    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 :

    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 如下:

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

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

    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 是无法判断是否是数组的:

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

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

    typeof 的一些判断结果:

    // 基本类型
    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

    原创系列推荐

    1. JavaScript 重温系列(22篇全)

    2. ECMAScript 重温系列(10篇全)

    3. JavaScript设计模式 重温系列(9篇全)

    4. 正则 / 框架 / 算法等 重温系列(16篇全)

    5. Webpack4 入门(上)|| Webpack4 入门(下)

    6. MobX 入门(上) ||  MobX 入门(下)

    7. 59篇原创系列汇总

    回复“加群”与大佬们一起交流学习~

    点这,与大家一起分享本文吧~

    个人博客:http://www.pingan8787.com 微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。 目前已连续推送文章 600+ 天,愿每个人的初心都能一直坚持下去!
  • 相关阅读:
    CF235D
    模拟赛 circle 题解
    平面图总结
    kd 树总结
    思维题
    luogu P1600 天天爱跑步
    UOJ #42. 【清华集训2014】Sum
    FZOJ 4344 连通性
    平衡树
    计蒜客 T3225 Darko 的生成树
  • 原文地址:https://www.cnblogs.com/pingan8787/p/13069496.html
Copyright © 2011-2022 走看看