美文网首页
JS数组类型检测

JS数组类型检测

作者: Ving | 来源:发表于2023-09-09 23:35 被阅读0次

    假定一个数组:

    const arr = [1, 2, 3]
    

    方式一

    通过 Object.prototype.toString

    function isArray(arr) {
      Object.prototype.toString.call(arr) === '[object Array]'
    }
    
    console.log(isArray(arr)) // true
    

    缺点:利用 toStringTag 更改字符值,可造成误判

    const obj = {
      [Symbol.toStringTag]: 'Array'
    }
    
    console.log(isArray(obj)) // true
    
    console.log(Object.prototype.toString.call(obj)) // [object Array]
    

    方式二

    通过 instanceof

    function isArray(arr) {
      return arr instanceof Array
    }
    
    console.log(isArray(arr)) // true
    

    缺点:
    1、通过** setPrototypeOf**更改原型,可造成误判

    const obj = {}
    
    Object.setPrototypeOf(obj, Array.prototype)
    
    console.log(isArray(obj)) // true
    

    2、在iframe环境构造,会存在误判

    /** 获取页面上的iframe */
    const iframe = document.querySelect('iframe')
    
    /** 获取iframe环境下的构造函数 */
    const Array2 = iframe.content Window.Array
    
    /** 创建数组 */
    const arr2 = new Array2()
    
    console.log(isArray(arr2)) // false
    

    方式三(推荐)

    通过 Array.isArray()

    console.log(Array.isArray(arr)) // true
    
    // 检测方式二中的obj
    console.log(isArray(obj)) // false
    
    // 检测方式三中的arr2
    console.log(isArray(arr2)) // true
    

    原理:通过检测是否经过Array的构造函数 f Array() { native code}

    相关文章

      网友评论

          本文标题:JS数组类型检测

          本文链接:https://www.haomeiwen.com/subject/riojvdtx.html