首页 前端知识 JS中判断数据类型的四种方法

JS中判断数据类型的四种方法

2024-08-24 23:08:28 前端知识 前端哥 964 44 我要收藏

目录

前言

一.typeof

二.instanceof

 三.Object.prototype.toString.call()

 四.constructor


前言

近期回顾了JS的知识,重新梳理一下几种不同的判断数据类型的方式,对于不同的数据类型,可以用不同的判断方式,防止类型判断的不够精确。

一.typeof

typeof可以用来判断number、string、boolean、undefined这四种简单数据类型,以及function这个引用类型(复杂数据类型)。具体写法如下:

typeof  要判断的数据

 测试如下:

    let arr = [1, 2, 3]
    let num = 1
    let str = 'abc'
    let fn = function () {
        console.log(1);
    }
    let obj = {
        name: "张三",
        age: 12
    }
    console.log(typeof num);//number
    console.log(typeof str);//string
    console.log(typeof true);//boolean
    console.log(typeof undefined);//undefined
    console.log(typeof null);//object
    console.log(typeof fn);//function
    console.log(typeof obj);//object
    console.log(typeof arr);//object
    console.log(typeof (new Date));//object

运行结果:  

可以看见typeof只能识别出number、string、boolean、undefined以及function的具体类型,对于null、array、obj只能识别为obj类型,但不能识别出具体对象类型(Date、Function、Array、Regexp、Number、Object、String、Math、Global、Boolean)。

二.instanceof

instanceof 运算符用于检测构造函数(右边)的 prototype 属性是否出现在某个实例对象(左边)的原型链上。这种方法判断结果返回的是boolean值,并且只能用于对象、数组、函数,不能用于简单数据类型上,具体写法:

要判断的数据 instanceof 数据类型

测试如下: 

let arr = [1, 2, 3]
    let num = 1
    let str = 'abc'
    let fn = function () {
        console.log(1);
    }
    let obj = {
        name: "张三",
        age: 12
    }
    console.log(num instanceof Number);//false
    console.log(arr instanceof Array);//true
    console.log(fn instanceof Function);//true
    console.log(obj instanceof Object);//true
    console.log((new Date) instanceof Date);//true

运行结果:

 三.Object.prototype.toString.call()

每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。

默认情况下,toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中 type 是对象的类型。

由于Object.prototype.toString()本身允许被修改,像Array、Boolean、Number的toString就被重写过,要是想判断传入值的类型,需要把传入值的this,指向Object.prototype ,才能判断传入值的类型,所以需要调用Object.prototype.toString.call(arg)来判断arg的类型,call将arg的上下文指向Object,所以arg执行了Object的toString方法。具体写法:

Object.prototype.toString.call(要判断的数据)

测试如下:

let arr = [1, 2, 3]
    let num = 1
    let str = 'abc'
    let fn = function () {
        console.log(1);
    }
    let obj = {
        name: "张三",
        age: 12
    }
 console.log(Object.prototype.toString.call(num));        // [object Number]
 console.log(Object.prototype.toString.call(str)); // [object String ]
 console.log(Object.prototype.toString.call(true));     // [object Boolean]
 console.log(Object.prototype.toString.call(undefined));  // [object Undefined]
 console.log(Object.prototype.toString.call(fn));   // [object Function]
 console.log(Object.prototype.toString.call(new Date));  // [object Date]
 console.log(Object.prototype.toString.call(null));   // [object Null]
 console.log(Object.prototype.toString.call(arr));  // [object Array]
 console.log(Object.prototype.toString.call(obj));       // [object Object]

运行结果:

 四.constructor

我们可以通过constructor来判断数据的类型,但是除了null、undefined,因为他们不是由对象构建。数字、布尔值、字符串是包装类对象,所以有constructor。constructor是原型对象的属性,指向构造函数。a.constructor==b。判断b是不是a的构造函数。具体写法:

要判断的数据.constructor===数据类型

测试如下:

 let arr = [1, 2, 3]
    let num = 1
    let str = 'abc'
    let fn = function () {
        console.log(1);
    }
    let obj = {
        name: "张三",
        age: 12
    }
    console.log(num.constructor === Number);  //true
    console.log(str.constructor === String);  //true
    console.log(true.constructor === Boolean);  //true
    console.log(fn.constructor === Function);  //true
    console.log((new Date).constructor === Date);  //true
    console.log(obj.constructor === Object);  //true
    console.log(arr.constructor === Array);  //true

运行结果:


参考文档: 【JS 判断数据类型的方法 - CSDN App】http://t.csdnimg.cn/jegqN

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16714.html
标签
评论
发布的文章

jQuery File Upload 使用教程

2024-09-03 02:09:33

jQuery笔记

2024-05-03 18:05:51

jQuery-Spectragram 使用教程

2024-09-03 02:09:26

echarts问题汇总

2024-09-03 02:09:12

echarts自定义悬浮提示

2024-09-03 02:09:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!