JS判断数据类型的常用方法汇总

 更新时间:2023年06月07日 15:55:45   作者:前端小蜜蜂来也  
判断数据类型是JavaScript面试时常常遇到的问题,本文为大家总结了几种常用的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

在搬砖途中看到一大神的代码,用 Object.prototype.toString.call()判断数据类型,在这里学习总结下,在js中,判断数据类型除了用typeof运算符之外,还可以用Object.prototype.toString.call()方法、instanceof操作符。

几种判断方法的区别

typeof判断数据类型

使用typeof操作符,判断数据类型返回值如下:

    typeof 1 // "number"
    typeof "a" // "string"
    typeof true // "boolean"
    typeof {} // "object"
    typeof [] // "object"
    typeof function(){} // "function"

使用时的一个问题是,在判断数组和对象存储值时,都返回”object”。

Object.prototype上的原生toString()方法判断数据类型

Object.prototype.toString.call()方法既可以判断基本类型,也可以判断原生引用类型,还可以判断原生JSON对象。

判断基本类型

数字number、字符串string、布尔值boolean。

Object.prototype.toString.call(2);//"[object Number]"
Object.prototype.toString.call("s");//"[object String]"
Object.prototype.toString.call(true);//"[object Boolean]"

判断空类型

null和undefined。

Object.prototype.toString.call(null);//"[object Null]"
Object.prototype.toString.call(undefined);//"[object Undefined]"

判断复合类型

对象Object、数组Array、方法Function、日期Date、布尔Boolean、数字Number、字符串String、正则RegExp、Math。

例如上面例子中的引用类型存储值就可以使用Object.prototype.toString()方法区别出来:

Object.prototype.toString.call({});//"[object Object]"
Object.prototype.toString.call([]);//"[object Array]"
Object.prototype.toString.call(function(){});//"[object Function]"
Object.prototype.toString.call(String);//"[object Function]"
var t = new Date();
Object.prototype.toString.call(t);//"[object Date]"
var bb = new Boolean();
Object.prototype.toString.call(bb);//"[object Boolean]"
var bb = new Number();
Object.prototype.toString.call(bb);//"[object Number]"
var str = new String();
Object.prototype.toString.call(str);//"[object String]"
var reg = new RegExp("^1[34578][0-9]{9}$","g");
Object.prototype.toString.call(reg);//"[object RegExp]"
var reg = Math.valueOf();
Object.prototype.toString.call(reg);//"[object Math]"

判断原生JSON对象

var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON);
console.log(isNativeJSON);//[object JSON]

判断自定义类型

function Foo(name,age) {
this.name = name;
this.age = age;
}
var foo =new Foo("harry",20);
Object.prototype.toString.call(foo);//"[object Object]"

遇到的一个问题是,使用Object.prototype.toString.call()方法不能判断foo是Foo类的实例。只能用instanceof来判断。

instanceof判断数据类型

instanceof作用是判断原型与实例之间的关系。用法是:

instanceof 原型

instanceof操作符会在实例的原型链上查找,直到找到右边构造函数的prototype属性,或者为null的时候停止。

console.log(foo instanceof Foo);//true

到此这篇关于JS判断数据类型的常用方法汇总的文章就介绍到这了,更多相关JS判断数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文详解JavaScript的继承机制

    一文详解JavaScript的继承机制

    在JavaScript中,继承允许一个对象从另一个对象继承属性和方法,本文将详细介绍JavaScript中的继承机制,包括原型链、构造函数、原型对象以及几种实现继承的方法,需要的朋友可以参考下
    2024-04-04
  • JavaScript的History API使搜索引擎抓取AJAX内容

    JavaScript的History API使搜索引擎抓取AJAX内容

    这篇文章主要介绍了JavaScript的History API使搜索引擎抓取AJAX内容 的相关资料,需要的朋友可以参考下
    2015-12-12
  • js判断IE浏览器版本过低示例代码

    js判断IE浏览器版本过低示例代码

    弄了个很简单的例子判断IE浏览器版本是否过低,注意在IE6和IE7版本较低情况下下才看到它的提示效果,需要的朋友可以收藏下
    2013-11-11
  • JS实现网页抢购功能(触发,终止脚本)

    JS实现网页抢购功能(触发,终止脚本)

    小编通过一个网页式的抢购功能的实现给大家讲解一下JS如何触发和终止脚本来完成这个任务。
    2017-11-11
  • JS实现选项卡实例详解

    JS实现选项卡实例详解

    这篇文章主要介绍了JS实现选项卡的方法,结合实例形式详细讲述了JavaScript实现选项卡的布局与功能实现的完整步骤及相关技巧,需要的朋友可以参考下
    2015-11-11
  • javascript解析xml实现省市县三级联动的方法

    javascript解析xml实现省市县三级联动的方法

    这篇文章主要介绍了javascript解析xml实现省市县三级联动的方法,涉及javascript针对节点的操作与XML文件解析的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • uniapp发送formdata表单请求2种方法(全网最简单方法)

    uniapp发送formdata表单请求2种方法(全网最简单方法)

    这篇文章主要给大家介绍了关于uniapp发送formdata表单请求2种方法的相关资料,本文介绍的方法应该是全网最简单方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • javascript 动态创建表格的2种方法总结

    javascript 动态创建表格的2种方法总结

    本文给大家总结了2种使用javascript动态创建表格的方法,非常简单实用,小伙伴们自己对比下看看哪种更适合你呢,一般本人是使用第一种的。
    2015-03-03
  • javascript 二维排序表格代码

    javascript 二维排序表格代码

    目前一直在学习WEB前端的知识。下面贴出最近完成的一个可排序表格.
    2010-12-12
  • JavaScript封装Vue-Router实现流程详解

    JavaScript封装Vue-Router实现流程详解

    这篇文章主要介绍了JavaScript封装Vue-Router实现流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09

最新评论