扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript类型检测的方法实例教程
  • 134

0
分享到

JavaScript类型检测的方法实例教程

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

前言 javascript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感js知识点的繁碎，故将学习到

前言

javascript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感js知识点的繁碎，故将学习到的一些知识、思考和感悟记录下来。

JS基本类型

JavaScript的基本类型分为原始基本类型和引用数据类型：

原始基本类型：

  • number
  • string
  • boolean
  • null
  • undefined
  • symbol

引用数据类型：

  • Object
  • Function
  • Array
  • Date
  • RegExp

注意：ES5中没有symbol类型

类型检测

类型检测有5中常见的方法：

  1. typeof
  2. instanceof
  3. Object.prototype.toString
  4. constructor
  5. duck type

1.typeof 判断基本类型

使用关键字 typeof 返回的是类型名仅包括以下 7 种：number、string、boolean、undefined、symbol、object、function 。

null和大部分的引用类型都不能用 typeof 进行判断。


let num = 32
let str = "32"
let bool = true
let nul = null
let undef = undefined
let sym = Symbol()

const obj = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RegExp()

console.log(typeof num) //number
console.log(typeof str) //string
console.log(typeof bool) //boolean
console.log(typeof nul) //object
console.log(typeof undef) //undefined
console.log(typeof sym) //symbol

console.log(typeof obj) //object
console.log(typeof arr) //object
console.log(typeof fun) //function
console.log(typeof date) //object
console.log(typeof reg) //object

注意：用typeof判断null、Array、Date、RegExp等类型结果均为object

2.instanceof 判断引用数据类型

instanceof利用的是变量的__proto__属性指向原型的prototype属性进行类型判断，需要注意的是，如果对基本数据类型使用直接赋值的方法，则__proto__属性是不存在的，我们需要使用构造函数。


const obj = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RegExp()

console.log(obj instanceof Object) //true
console.log(arr instanceof Array) //true
console.log(fun instanceof Function) //true
console.log(date instanceof Date) //true
console.log(reg instanceof RegExp) //true

let num1 = 32
let num2 = new Number(32)
console.log(num1 instanceof Number) //false
console.log(num2 instanceof Number) //true

另外，虽然 instanceof 能够判断出arr是Array的实例，但它认为也是Object的实例，这对判断一个未知引用类型并不友好。


const arr = new Array()
console.log(arr instanceof Array) //true
console.log(arr instanceof Object) //true

原因是 arr.__proto__的__proto__属性指向Object的原型对象。

对于这种情况，可以换用 constructor 进行判断。

注意：不同window或iframe间的对象检测不能使用instanceof ！

3.Object.prototype.toString 判断类型

toString() 是 Object 的原型方法，每一个继承 Object 的对象都有 toString 方法。

所有使用 typeof 返回值为 object 的对象都包含一个内部属性[[class]]，这个属性无法直接访问，一般通过Object.prototype.toString()来查看。

如果 toString 方法没有重写的话，默认返回当前对象的 [[Class]]，其格式为[object Xxx]，其中 Xxx 为对象的类型。但除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。


let num = 32
let str = "32"
let bool = true
let nul = null
let undef = undefined
let sym= Symbol()

const obj = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RpgExp()

console.log(Object.prototype.toString.apply(num)) //"[object Number]"
console.log(Object.prototype.toString.apply(str)) //"[object String]"
console.log(Object.prototype.toString.apply(bool)) //"[object Boolean]"
console.log(Object.prototype.toString.apply(nul)) //"[object Null"
console.log(Object.prototype.toString.apply(undef)) //"[object Undefined]"
console.log(Object.prototype.toString.apply(sym) //"[object Symbol]"

console.log(Object.prototype.toString.call(obj)) //"[object Object]"
console.log(Object.prototype.toString.call(arr)) //"[object Array]"
console.log(Object.prototype.toString.call(fun)) //"[object Function]"
console.log(Object.prototype.toString.call(date)) //"[object Date]"
console.log(Object.prototype.toString.call(reg) //"[object RegExp]"

Object.prototype.toString可以判断null，但习惯上我们用 null===null来判断是否为null。

4.constructor判断类型

constructor属性会返回变量的构造函数，当然也可以利用字符串截取获取构造函数名称进行判断来获取布尔值，如" ".constructor === String。


let num = 32
let str = "32"
let bool = true
let nul = null
let undef = undefined
let sym= Symbol()

const object = new Object()
const arr = new Array()
const fun = new Function()
const date = new Date()
const reg = new RegExp()

console.log(num.constructor) //ƒ Number() { [native code] }
console.log(str.constructor) //ƒ String() { [native code] }
console.log(bool.constructor) //ƒ Boolean() { [native code] }
console.log(nul.constructor) //Uncaught TypeError: Cannot read property 'constructor' of null
console.log(undef.constructor) //Uncaught TypeError: Cannot read property 'constructor' of undefined
console.log(sym.constructor) //ƒ Symbol() { [native code] }

console.log(obj.constructor === Object) //true
console.log(arr.constructor === Array) //true
console.log(fun.constructor === Function) //true
console.log(date.constructor === Date) //true
console.log(reg.constructor === RegExp) //true

无法用constructor判断null和undefined，但可以避免使用instanceof时arr的原型对象既可以为Array也可以是Object。

5.duck type 利用特征来判断类型

在程序设计中，鸭子类型（英语：duck typing）是动态类型的一种风格。在这种风格中，一个对象有效的语义，不是由继承自特定的类或实现特定的接口，而是由"当前方法和属性的集合"决定。

“当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为鸭子。”

在鸭子类型中，关注点在于对象的行为，能作什么；而不是关注对象所属的类型。

例如，在不使用鸭子类型的语言中，我们可以编写一个函数，它接受一个类型为"鸭子"的对象，并调用它的"走"和"叫"方法。

随后，在使用鸭子类型的函数中，可以接受一个任意类型的对象，并调用它的"走"和"叫"方法。如果这些需要被调用的方法不存在，那么将引发一个运行时错误。任何拥有这样的正确的"走"和"叫"方法的对象都可被函数接受。

比如判断一个对象是否是数组，可以看这个对象是否拥有push()等方法

总结

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

--结束END--

本文标题: JavaScript类型检测的方法实例教程

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

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

猜你喜欢
  • JavaScript类型检测的方法实例教程
    前言 JavaScript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感JS知识点的繁碎，故将学习到...
    99+
    2024-04-02
  • JavaScript之类型检测的案例
    这篇文章主要介绍了JavaScript之类型检测的案例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、typeoftypeof：操作符返回一个字符串，表示未经计算的操作数的...
    99+
    2023-06-07
  • JavaScript 检测文件的类型的方法
    目录一、如何查看图片的二进制数据二、如何区分图片的类型三、如何检测图片的类型3.1 定义 readBuffer 函数3.2 定义 check 函数3.3 检测 PNG 图片类型我们会...
    99+
    2024-04-02
  • JavaScript数据类型检测实现方法详解
    目录一、typeof二、instanceof三、Object.prototype.toString.call()面试问题一、typeof 优点：能快速判断基本数据类型，除了 Null...
    99+
    2022-11-13
    JavaScript数据类型检测 JS数据类型检测
  • 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怎么检测文件的类型，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在日常工作中，文件上传是一个很常见的功能。在某些情况下，我们希望能限制文件上传的类型，比如限制只能上传 PNG 格式...
    99+
    2023-06-15
  • JavaScript数据类型检测功能如何实现
    本文小编为大家详细介绍“JavaScript数据类型检测功能如何实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript数据类型检测功能如何实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、t...
    99+
    2023-07-04
  • JavaScript中检测数据类型的四种方法分别是什么
    这期内容当中小编将会给大家带来有关JavaScript中检测数据类型的四种方法分别是什么，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。前言：在介绍检测数据类型的方法之前，先说说JavaScript中数据类...
    99+
    2023-06-26
  • 如何使用JavaScript 检测文件的类型
    这篇文章将为大家详细讲解有关如何使用JavaScript 检测文件的类型，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。一、如何查看图片的二进制数据要查看图片对应的二进制数据，我们可以借助一些...
    99+
    2023-06-15
  • javascript中检测网络的方法
    这篇文章将为大家详细讲解有关javascript中检测网络的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。javascript检测网络的方法：1、通过navigator去检测网络；2、 使用“wind...
    99+
    2023-06-15
  • javascript数据类型基础示例教程
    目录js中的输入输出语句js中的注释js中声名变量1、 js中用关键字var声明一个变量2、声明变量特殊情况3、变量命名规范js中的基本数据类型数字型 Number布尔值类型 Boo...
    99+
    2024-04-02
  • JavaScript实现的人脸检测方法是怎样的
    这篇文章给大家介绍JavaScript实现的人脸检测方法是怎样的，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。我一直对视频和图片中的人脸标记、检测和人脸识别技术很感兴趣。尽管我知道获取...
    99+
    2024-04-02
  • 实例测试MySQL的enum类型
    在开发项目时通常会遇到一些状态字段，例如订单的状态有 待支付、已支付、已关闭、已退款 等，我以前做的项目都是把这些状态用数字存在数据库中，然后在 php 代码中用常量来维护一份映射表，例如： const...
    99+
    2024-04-02
  • javascript基础数据类型转换教程示例
    目录数值型转换为字符串类型字符串类型转换为数值型转换为布尔型结语数值型转换为字符串类型 方式说明案例toString()转成字符串var num =1; alert ( num.to...
    99+
    2024-04-02
  • js中各种数据类型检测和判定的实战示例
    目录介绍准备目标测试用例代码使用总结 介绍 在前端开发中，js 有各种各样的数据类型，数据类型检测是每个开发者都必须掌握基础知识。数据类型检测的方法也有很多种，本题将封装一...
    99+
    2022-11-13
    js数据类型检测和判定方法 js检测数据类型的方法 js检验数据类型
  • JavaScript类型转换的方法
    这篇文章主要讲解了“JavaScript类型转换的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript类型转换的方法”吧！  ...
    99+
    2024-04-02
  • Golang泛型实现类型转换的方法实例
    目录1.前言2.To String3.To Other Type3.泛型4.使用示例5.go-huge-util参考文献总结1.前言 Golang 标准库提供了很多类型转换的函数，如...
    99+
    2022-12-30
    Golang泛型 golang数据类型转换 golang类型转换
  • javascript类静态方法实例分析
    本文小编为大家详细介绍“javascript类静态方法实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“javascript类静态方法实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起...
    99+
    2024-04-02
  • 使用Python检查数据类型的方法
    如何使用Python查看数据类型，需要具体代码示例 在使用Python进行数据处理和分析的过程中，了解数据的类型是非常重要的一步。Python提供了一种内置的函数type()，可以用来查看数据的类型。本文将介绍如何使用Pytho...
    99+
    2024-01-20
    Python 数据类型 查看
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作