JavaScript 数据类型检测总结

原文:https://blog.csdn.net/q3254421/article/details/85483462

在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>

=============== End

JavaScript 数据类型检测总结的更多相关文章

  1. javascript 数据类型 -- 检测

    一.前言 在上一篇博文中 Javascript 数据类型 -- 分类 中,我们梳理了 javascript 的基本类型和引用类型,并提到了一些冷知识.大概的知识框架如下: 这篇博文就讲一下在写代码的过 ...

  2. JavaScript: 数据类型检测

    由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...

  3. JavaScript数据类型检测 数组(Array)检测方式

    前言 对于确定某个对象是不是数组,一直是数组的一个经典问题.本文专门将该问题择出来,介绍什么才是正确的javascript数组检测方式 typeof 首先,使用最常用的类型检测工具--typeof运算 ...

  4. Javascript数据类型检测

    Javascript有5种简单数据类型和一种复杂数据类型 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,R ...

  5. JavaScript数据类型检测详解

    //JS该如何检测数据的类型呢? //使用关键字: typeof //输出结果依次为:'number','string','boolean'. console.log(typeof 17); cons ...

  6. javascript数据类型检测方法

    一.字符串.数字.布尔值.undefined的最佳选择市使用 typeof 运算符进行检测: 对于字符串,typeof 返回"string" 对于数字,typeof 返回" ...

  7. JavaScript系列文章:不能不看的数据类型检测

    由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...

  8. javascript 中检测数据类型的方法

    typeof 检测数据类型 javascript 中检测数据类型有好几种,其中最简单的一种是 typeof 方式.typeof 方法返回的结果是一个字符串.typeof 的用法如下: typeof v ...

  9. 【JavaScript框架封装】数据类型检测模块功能封装

    数据类型检测封装后的最终模块代码如下: /*数据类型检验*/ xframe.extend(xframe, { // 鸭子类型(duck typing)如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭 ...

随机推荐

  1. blob 对象 实现分片上传 及 显示进度条

    blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进 ...

  2. Luogu3162 CQOI2012 组装 贪心

    传送门 如果提供每一种零件的生产车间固定了,那么总时间\(t\)与组装车间的位置\(x\)的关系就是 \(t = \sum (x-a_i)^2 = nx^2-2\sum a_ix + \sum a_i ...

  3. 11.10 (下午)开课二个月零六天(ajax验证用户名,ajax调数据库)

    用ajax验证用户名是否可用 testuid.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  4. Scala学习(四)练习

    映射和元组&练习 1. 设置一个映射,其中包含你想要的一些装备,以及它们的价格.然后构建另一个映射,采用同一组键,但在价格上打9折 映射代码如下: object HelloScala{ def ...

  5. TCP 三次握手原理,你真的理解吗?

    最近,阿里中间件小哥哥蛰剑碰到一个问题——client端连接服务器总是抛异常.在反复定位分析.并查阅各种资料文章搞懂后,他发现没有文章把这两个队列以及怎么观察他们的指标说清楚. 因此,蛰剑写下这篇文章 ...

  6. [UWP 自定义控件]了解模板化控件(1):基础知识

    1.概述 UWP允许开发者通过两种方式创建自定义的控件:UserControl和TemplatedControl(模板化控件).这个主题主要讲述如何创建和理解模板化控件,目标是能理解模板化控件常见的知 ...

  7. og标签对SEO的作用及用法

    meta property=og标签对SEO的作用及用法,如果你仔细观察会发现本站点<head>代码中有一段:"property="og:image"这段代码 ...

  8. Wannafly挑战赛25 A.因子

    传送门 [https://www.nowcoder.com/acm/contest/197/A] 题意 给你n,m,让你求n!里有多少个m 分析 看这个你就懂了 [https://blog.csdn. ...

  9. 个人作业Week2-代码复审(修改明确了要求)

    代码复审 零,说在前面的话 大家完成了个人项目之后,都写了很多代码. 这些代码可能: 大括号换行/不换行 使用tab缩进/使用空格缩进 变量名函数名的定义很好/不好 每个函数都有详细的注释解释函数的功 ...

  10. [ERROR] Failed to execute goal org.codehaus.mojo:gwt-maven-plugin:2.5.0-rc1:compile (default) on project zeus-web: Command 解决

    在编译maven项目,打包maven packeage -Dmaven.test.skip=TRUE时,报错“[ERROR] Failed to execute goal org.codehaus.m ...