资讯专栏INFORMATION COLUMN

js类型检测的几种方式盘点

fantix / 568人阅读

摘要:开始之前,必须要知道中关于类型的定义。作为基本类型也返回,因为在中的定义就是用来表示一个空对象指针。返回值类型总结一般用来检测,无法正确检测基本数据类型。但是注意,因为和都是类型。返回值类型总结这也是比较好的返回方式了。

开始之前,必须要知道js中关于类型的定义。js中有6种基本类型,null,undefined,boolean,string,number,symbol(es6新增的类型)。还有一种引用类型(复杂类型)是object。像是{},function函数,[]数组都是对象。

首先,先定义几种object类型

  var obj = {};
  function fun(){};
  var arr = [];
1.typeof
    console.log(typeof null);  //object
    console.log(typeof fun);  //function
    console.log(typeof obj);  //object
    console.log(typeof arr);  //object
    console.log(typeof "abc");  //string
    console.log(typeof 23);  //number
    console.log(typeof false);  //boolean

返回值类型:string
总结:一般只用来检测基本数据类型。function能正确返回,像是数组和对象都只会返回object。null作为基本类型也返回object,因为null在js中的定义就是用来表示一个空对象指针。

2.instanceof
    console.log("string" instanceof String);  //false
    console.log(23 instanceof Number);  //false
    console.log(false instanceof Boolean);  //false
    console.log(null instanceof Object);  //false
    console.log(obj instanceof Object);  //true
    console.log(fun instanceof Object);  //true
    console.log(fun instanceof Function);  //true
    console.log(obj instanceof Function);  //false
    console.log(arr instanceof Object);  //true
    console.log(arr instanceof Array);  //true

返回值类型:boolean
总结:一般用来检测object,无法正确检测基本数据类型。但是注意,因为function和array都是object类型。除了相对应的Function和Array会返回true以外,instanceof Object也会返回true。

3.constructor
    console.log(obj.constructor == Object);  //true
    console.log(arr.constructor == Object);  //false
    console.log(arr.constructor == Array);  //true
    console.log(arr.constructor === Array);  //true
    console.log(fun.constructor == Object);  //false
    console.log(fun.constructor == Function);  //true
    console.log(fun.constructor === Function);  //true
    console.log("fun".constructor == String);  //true
    console.log(false.constructor == Boolean);  //true

返回值类型:boolean
总结:constructor(构造函数)检测,这是我觉得最好的检测方式了。能正确判断是那种基本类型和那种object类型。而且通过constructor和prototype(原型)在有些时候能用来判断两个对象是否相等。

4.Object.prototype.toString.call()
    console.log(Object.prototype.toString.call("rerqw"));  //[object String]
    console.log(Object.prototype.toString.call(16));  //[object Number]
    console.log(Object.prototype.toString.call(false));  // [object Boolean]
    console.log(Object.prototype.toString.call(null));  //[object Null]
    console.log(Object.prototype.toString.call(undefined));  //[object Undefined]
    console.log(Object.prototype.toString.call(fun));  //[object Function]
    console.log(Object.prototype.toString.call(arr));  //[object Array]
    console.log(Object.prototype.toString.call(obj));  //[object Object]

返回值类型:string
总结:这也是比较好的返回方式了。虽然返回的样式怪怪的。但是能正确返回基本类型和各种object类型。

5.Object.prototype.toString.apply()

用法和上面Object.prototype.toString.call()一样,就是call换成apply。返回结果也一样。
至于为什么call和apply实现效果一样。又是另一个更复杂的问题,改天我会写一篇文章,详细分析apply(),call(),bind()三种方法。会回来贴上地址的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105304.html

相关文章

  • #yyds干货盘点# 前端基础知识面试集锦3

    摘要:当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单,建议使用构造函数与原型混合方式。它是基于的一个子集。 JavaScript介绍js的基本数据类型。Undefined、Null、Boolean、Number、Stri...

    番茄西红柿 评论0 收藏2637
  • 盘点JavaScript里好用的原生API ꒰・◡・๑꒱

    这段时间翻了一番JavaScript的api,发现不少好的轮子,省去造的麻烦了。 直接进入正题 解析字符串对象 我们都知道,JavaScript对象可以序列化为JSON,JSON也可以解析成对象,但是问题是如果出现了一个既不是JSON也不是对象的东西,转成哪一方都不方便,那么eval就可以派上用场 var obj = {a:1,b:2}; // 看起来像对象的字符串 eval((+ ...

    godlong_X 评论0 收藏0
  • 前端每周清单半年盘点之 Node.js

    摘要:前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。对该漏洞的综合评级为高危。目前,相关利用方式已经在互联网上公开,近期出现攻击尝试爆发的可能。 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢...

    kid143 评论0 收藏0
  • javascript数据类型检测几种方式

    摘要:类型检测的方法鸭子类型返回一个字符串,适合函数对象和基本类型的判断返回一个布尔值,判断对象类型基于原型链的方式原理左边对象的原型链原型上是否有右边构造函数的对象属性是基本类型这么多就说明不适合用于基本数据类型注意返回的是 类型检测的方法 typeof instanceof Object.protype.toString constructor duck type:鸭子类型 show...

    Baaaan 评论0 收藏0
  • JavaScript知识点总结

    摘要:参与任何数值计算的结构都是,而且。。面向人类的理性事物,而不是机器信号。达到无刷新效果。的工作原理总是指向一个对象,具体是运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。原型对象上有一个属性,该属性指向的就是构造函数。 1.JS面向对象的理解 面向对象的三大特点:继承、封装、多态 1、JS中通过prototype实现原型继承 2、JS对象可以通过对象冒充,实现多重继承, 3...

    sean 评论0 收藏0

发表评论

0条评论

fantix

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<