js数据类型检测总结

 更新时间:2018年08月05日 11:13:11   作者:余大彬  
这篇文章给大家分享了js数据类型检测的相关实例内容,有需要的朋友可以测试下。

在js中,有四种用于检测数据类型的方式,分别是:

  • typeof  用来检测数据类型的运算符
  • instanceof    检测一个实例是否属于某个类
  • constructor   构造函数
  • Object.prototype.toString.call()  原型链上的Object对象的toString方法

下面我们就来分别介绍一下上面四种方法的适用场景和局限性。

typeof 用来检测数据类型的运算符

使用typeof检测数据类型,返回值是字符串格式。能够返回的数据类型

是:"number","string","bolean","undefined","function","object"。

<script>
  console.log(typeof(1));  //number
  console.log(typeof('hello'));  //string
  console.log(typeof(true));  //boolean
  console.log(typeof(undefined));  //undefined
  console.log(typeof(null));  //object
  console.log(typeof({}));  //object
  console.log(typeof(function() {}));  //function
</script>

局限性:

  • typeof (null); //"object"。这是由于在js中,null值表示一个空对象指针,而这也正是使用typeof操作 符检测null值时会返回"object"的原因。
  • 不能具体的细分是数组还是正则,还是对象中其他的值,因为使用typeof检测数据类型,对于对象数据类型的所有的值,最后返回的都是"object"

instanceof 检测某一个实例是否属于某个类

instanceof主要用来弥补typeof不能检测具体属于哪个对象的局限性。

<script>
  let arr = [1,2,3];
  let reg = /\w/;
  console.log(arr instanceof Array);  //true
  console.log(arr instanceof Object);  //true
  console.log(reg instanceof RegExp);  //true
  console.log(reg instanceof Object);  //true
</script>

局限性:

  • 不能用于检测和处理字面量方式创建出来的基本数据类型值,即原始数据类型
  • instanceof的特性:只要在当前实例的原型链上的对象,我们用其检测出来都为true
  • 在类的原型继承中,我们最后检测出来的结果未必正确

constructor 构造函数

是函数原型上的属性,该属性指向的是构造函数本身。

作用和instsnceof非常相似,与instanceof不同的是,不仅可以处理引用数据类型,还可以处理原始数据类型。

<script>
  let num = 12;
  let obj = {};
  console.log(num.constructor == Number);//true
  console.log(obj.constructor == Object);//true
</script>

但是要注意一点的是,当直接用(对象字面量或原始数据).constructor时,最好加上()。为了便于理解,我们来看一个例子。

<script>
  1.constructor === Number;    //报错,Invalid or unexceped token
  (1).constructor === Number;    //true
  {}.constructor === Number;    //报错,Invalid or unexceped token
  ({}).constructor === Number;  //true
</script>

这主要是由于js内部解析方式造成的,js会把1.constructor解析成小数,这显然是不合理的,小数点后应该是数字,因此就会引发报错。js会把{}解析成语句块来执行,这时后面出现一个小数点显然也是不合理的,因此也会报错。为了解决这个问题,我们可以为表达式加上()使js能够正确解析。

局限性:我们可以把类的原型进行重写,在重写的过程中很可能把之前constructor给覆盖了,这样检测出来的结果就是不准确的

<script>
   function Fn() {};
  Fn.prototype = new Array;
  var f = new Fn;
  //f是一个函数,按道理说他的构造函数应该是Function,但是修改其原型链后,它的constructor变成了Array.
  console.log(f.constructor == Array);  //true
</script>

Object.prototype.toString.call() 原型链上的Object对象的toString方法

Object.prototype.toString的作用是返回当前方法的执行主体(方法中的this)所属类的详细信息,是最全面也是最常用的检测数据类型的方式。

返回值的类型为string类型。

<script> 
  console.log(Object.prototype.toString.call(1));          //[object Number]
  console.log(Object.prototype.toString.call(/^sf/));        //[object RegExp]
  console.log(Object.prototype.toString.call("hello"));      //[object String]
  console.log(Object.prototype.toString.call(true));        //[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(function() {}));    //[object Function]
  console.log(typeof(Object.prototype.toString.call(function() {})));    //string
</script>

相关文章

  • javascript:void(0)的真正含义实例分析

    javascript:void(0)的真正含义实例分析

    void操作符解释
    2008-08-08
  • JavaScript的词法结构精华篇

    JavaScript的词法结构精华篇

    今天小编就为大家分享一篇关于JavaScript的词法结构精华篇,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • 如何利用原生JS实时监听input框输入值

    如何利用原生JS实时监听input框输入值

    这篇文章主要介绍了如何利用原生JS实时监听input框输入值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • js实现二级联动简单实例

    js实现二级联动简单实例

    这篇文章主要为大家详细介绍了js实现二级联动简单实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 原生js实现放大镜

    原生js实现放大镜

    本文主要分享了原生js实现放大镜效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • confirm的用法示例用于按钮操作时确定是否执行

    confirm的用法示例用于按钮操作时确定是否执行

    这篇文章主要介绍了confirm的用法,confirm一般用于按钮操作时确定是否执行,需要的朋友可以参考下
    2014-06-06
  • 如何防止JavaScript中的正则表达式回溯

    如何防止JavaScript中的正则表达式回溯

    某些正则表达式模式可能容易受到回溯的影响,这可能会导致超线性运行时,并可能导致DoS攻击,本文就来介绍一下如何防止JavaScript中的正则表达式回溯,感兴趣的可以了解一下
    2023-08-08
  • 解决JavaScript精度问题的常见方法

    解决JavaScript精度问题的常见方法

    在 JavaScript 中,处理浮点数时经常会遇到精度丢失的问题,这是由于 JavaScript 内部采用 IEEE 754 标准表示浮点数,导致某些小数无法精确表示,本文将介绍一些常见的方法来解决 JavaScript 中的精度问题,并讨论它们的优缺点,需要的朋友可以参考下
    2024-05-05
  • js获取form表单所有数据的简单方法

    js获取form表单所有数据的简单方法

    下面小编就为大家带来一篇js获取form表单所有数据的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 原生js实现贪食蛇小游戏的思路详解

    原生js实现贪食蛇小游戏的思路详解

    这篇文章主要介绍了原生js实现贪食蛇小游戏的思路详解,,文中给大家写出了注释,帮助大家理解代码,需要的朋友可以参考下
    2019-11-11

最新评论