iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中检测数据类型的四种方法
  • 929
分享到

JavaScript中检测数据类型的四种方法

2024-04-02 19:04:59 929人浏览 薄情痞子
摘要

目录1. typeof2. instanceof3. constructor(构造函数)4. Object.prototype.toString.call()前言:在介绍检测数据类型

前言:
在介绍检测数据类型的方法之前,先说说javascript中数据类型有哪些吧~

JS数据类型主要分为两大类:基本数据类型和引用数据类型

基本数据类型:number、string、boolean、null、undefined、symbol(es6
引用数据类型:object(array、function、date...)

数据类型详细介绍请点击这里

检测数据类型四种方法:

  • typeof
  • instanceof
  • constructor
  • Object.prototype.toString.call()

1. typeof

语法:

typeof(变量)
//or
typeof 变量

示例:

 

console.log(typeof "");            //string
console.log(typeof 1);             //number
console.log(typeof true);          //boolean
console.log(typeof null);          //object!!!
console.log(typeof undefined);     //undefined
console.log(typeof []);            //object
console.log(typeof function(){});  //function
console.log(typeof console.log);   //function
console.log(typeof {});            //object
console.log(typeof Symbol());      //symbol(es6)
console.log(typeof 23423n);        //bigint(谷歌67版本新提出)

总结:

  • typeof 的返回类型为字符串,值有:numberbooleanstringobjectfunctionundefinedsymbolbigint
  • typeof 一般用来判断基本数据类型,除了判断null会输出"object",其它都是正确的
  • typeof 判断引用数据类型时,除了判断函数会输出"function",其它都是输出"object"

注意:这里涉及两个经常考的面试题

  •  null 的数据类型是object (null是一个空的引用对象,是一个占位符)
  •  console.log 的数据类型是function 
  •  对于引用数据类型的判断,使用typeof并不准确,所以可以使用instanceof来判断引用数据类型

2. instanceof

instanceof 可以准确的判断引用数据类型,它的原理是检测构造函数的prototype属性是否在某个实例对象的原型链上

语法:

obj1 instanceof obj2 //obj1 是否是 obj2的实例

示例:

 

console.log(9 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('libo' instanceof String);               // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true
// 注意以下两组
console.log(typeof null);                            //object
console.log(null instanceof Object);                 //false !!!
console.log(typeof NaN);                             //number
console.log(NaN instanceof Number);                  //false !!!

总结:

  • instanceof 用来判断对象,代码形式为 【obj1 instanceof obj2】(obj2 必须为对象,否则会报错!)
  • instanceof 返回值为布尔值

注意:

instanceof只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型

3. constructor(构造函数)

当一个函数 F被定义时,js引擎会为F添加 prototype 原型,然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。

如下所示:

当执行 var f = new F() 时,F 被当成了构造函数,f 是F的实例对象,此时 F 原型上的 constructor 传递到了 f 上,因此f.constructor === F

可以看出,F 利用原型对象上的 constructor 引用了自身,当 F 作为构造函数来创建对象时,原型上的 constructor 就被遗传到了新创建的对象上, 从原型链角度讲,构造函数 F 就是新对象的类型。这样做的意义是,让新对象在诞生以后,就具有可追溯的数据类型。

同样,JavaScript 中的内置对象在内部构建时也是这样做的:

 ?注意:

  • null和undefined是无效的对象,所以他们不会有constructor属性!
  • 函数的constructor是不稳定的,主要是因为开发者可以重写prototype,原有的constructor引用会丢失,constructor会默认为Object

为什么变成了 Object?

因为 prototype 被重新赋值的是一个 { }{ } 是 new Object() 的字面量,因此 new Object() 会将 Object 原型上的 constructor 传递给 { },也就是 Object 本身。

因此,为了规范开发,在重写对象原型时一般都需要重新给 constructor 赋值,以保证对象实例的类型不被篡改。

4. Object.prototype.toString.call()

toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。

对于 Object 对象,直接调用toString()  就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

 

Object.prototype.toString.call('') ;              // [object String]
Object.prototype.toString.call(1) ;               // [object Number]
Object.prototype.toString.call(true) ;            // [object Boolean]
Object.prototype.toString.call(Symbol());         // [object Symbol]
Object.prototype.toString.call(undefined) ;       // [object Undefined]
Object.prototype.toString.call(null) ;            // [object Null]
Object.prototype.toString.call(new Function()) ;  // [object Function]
Object.prototype.toString.call(new Date()) ;      // [object Date]
Object.prototype.toString.call([]) ;              // [object Array]
Object.prototype.toString.call(new RegExp()) ;    // [object RegExp]
Object.prototype.toString.call(new Error()) ;     // [object Error]
Object.prototype.toString.call(document) ;        // [object htmlDocument]
Object.prototype.toString.call(window) ;          // [object global] window 是全局对象 global 的引用

到此这篇关于JavaScript中检测数据类型的四种方法的文章就介绍到这了,更多相关JavaScript检测数据类型内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中检测数据类型的四种方法

本文链接: http://www.lsjlt.com/news/161943.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中检测数据类型的四种方法
    目录1. typeof2. instanceof3. constructor(构造函数)4. Object.prototype.toString.call()前言:在介绍检测数据类型...
    99+
    2024-04-02
  • JavaScript中检测数据类型的四种方法总结
    目录检测数据类型1:typeof检测数据类型2:instanceof检测数据类型3:constructor检测数据类型4:Object.prototype.toString.call...
    99+
    2023-05-16
    JavaScript检测数据类型方法 JavaScript检测数据类型 JavaScript数据类型
  • JavaScript中检测数据类型的四种方法分别是什么
    这期内容当中小编将会给大家带来有关JavaScript中检测数据类型的四种方法分别是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。前言:在介绍检测数据类型的方法之前,先说说JavaScript中数据类...
    99+
    2023-06-26
  • JavaScript数据类型检测实现方法详解
    目录一、typeof二、instanceof三、Object.prototype.toString.call()面试问题一、typeof 优点:能快速判断基本数据类型,除了 Null...
    99+
    2022-11-13
    JavaScript数据类型检测 JS数据类型检测
  • JavaScript中怎么检测数据类型
    本篇内容介绍了“JavaScript中怎么检测数据类型”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!检测数据类型1:typeof其返回结果都...
    99+
    2023-07-06
  • JS中的四种数据类型判断方法
    目录1、typeof2、instanceof3、constructor4、toString() 本文总结了四种判断方法: 1、typeof typeof是一个运算符,其有两种使用方式...
    99+
    2024-04-02
  • JavaScript 检测文件的类型的方法
    目录一、如何查看图片的二进制数据二、如何区分图片的类型三、如何检测图片的类型3.1 定义 readBuffer 函数3.2 定义 check 函数3.3 检测 PNG 图片类型我们会...
    99+
    2024-04-02
  • JavaScript类型检测的方法实例教程
    前言 JavaScript是web前端广泛应用的语言之一,在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端,颇感JS知识点的繁碎,故将学习到...
    99+
    2024-04-02
  • 关于JS数据类型检测的多种方式总结
    目录背景 判断数据类型的手段有哪些? 1. 用typeof判断基础数据类型: 2. 用instanceof判断对象数据类型3. 用contructor属性 4. toString方法...
    99+
    2024-04-02
  • 利用JS判断数据类型的四种方法
    目录前言1、typeof 2、instanceof 3、constructor 细节问题:4、toString 总结前言 Javascript 中的数据类型判断其实是一个JavaSc...
    99+
    2024-04-02
  • Golang检查变量类型的四种方式
    目录%T 格式化标识使用reflect包函数reflect.TypeOf()reflect.ValueOf().Kind()使用类型断言自定义方法检查类型Go提供几种方法检查变量的类...
    99+
    2024-04-02
  • JavaScript数据类型检测功能如何实现
    本文小编为大家详细介绍“JavaScript数据类型检测功能如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript数据类型检测功能如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、t...
    99+
    2023-07-04
  • JavaScript之类型检测的案例
    这篇文章主要介绍了JavaScript之类型检测的案例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、typeoftypeof:操作符返回一个字符串,表示未经计算的操作数的...
    99+
    2023-06-07
  • js中各种数据类型检测和判定的实战示例
    目录介绍准备目标测试用例代码使用总结 介绍 在前端开发中,js 有各种各样的数据类型,数据类型检测是每个开发者都必须掌握基础知识。数据类型检测的方法也有很多种,本题将封装一...
    99+
    2022-11-13
    js数据类型检测和判定方法 js检测数据类型的方法 js检验数据类型
  • JavaScript的八种数据类型
    目录一、前言二、动态数据类型2.1 字符串string2.2 数值number2.3 布尔boolean2.4 null和undefined2.5 symbol2.6 对象objec...
    99+
    2024-04-02
  • javascript中有几种数据类型
    本篇内容主要讲解“javascript中有几种数据类型”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中有几种数据类型”吧! ...
    99+
    2024-04-02
  • javascript中判断数据类型的方法
    这篇文章主要介绍了javascript中判断数据类型的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。js判断数据类型的方法:1、利用typeof操作符,语法“typeof...
    99+
    2023-06-15
  • js中基于数据类型检测的方式有哪些
    这篇文章主要为大家展示了“js中基于数据类型检测的方式有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js中基于数据类型检测的方式有哪些”这篇文章吧。1、t...
    99+
    2024-04-02
  • JavaScript怎么检测文件的类型
    这篇文章主要介绍JavaScript怎么检测文件的类型,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在日常工作中,文件上传是一个很常见的功能。在某些情况下,我们希望能限制文件上传的类型,比如限制只能上传 PNG 格式...
    99+
    2023-06-15
  • C++中四种类型转换的方法是什么
    这篇文章主要介绍了C++中四种类型转换的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇C++中四种类型转换的方法是什么文章都会有所收获,下面我们一起来看看吧。一、隐式类型转换和显示类型转换当等号两边的...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作