js数据类型检测总结


Posted in Javascript onAugust 05, 2018

在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 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
Express.JS使用详解
Jul 17 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 #Javascript
vue实现简单的MVVM框架
Aug 05 #Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 #Javascript
详解Require.js与Sea.js的区别
Aug 05 #Javascript
vue中关闭eslint的方法分析
Aug 04 #Javascript
详解Vue取消eslint语法限制
Aug 04 #Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 #Javascript
You might like
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
splice slice区别
2006/10/09 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
pandas数据集的端到端处理
2019/02/18 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
在什么时候需要使用"常引用"
2015/12/31 面试题
航海技术专业毕业生求职信
2014/04/06 职场文书
给下属加薪申请报告
2015/05/15 职场文书
小学班级管理心得体会
2016/01/07 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Python异常类型以及处理方法汇总
2021/06/05 Python
理解python中装饰器的作用
2021/07/21 Python
python脚本框架webpy模板控制结构
2021/11/20 Python
centos7安装mysql5.7经验记录
2022/05/02 Servers
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL