(JS)数据类型大揭秘:深度解析几种最常用的方法

前言:

不论你已经学习过几种数据类型的判断方法,本文将带给大家今后最最最实用的三种方法。 并且通过一些实例,详细分析它的使用方法和范围,及其优缺点

本文讨论的数据类型

七种原始数据类型(附带两种es6新增):

  1. string
  2. number
  3. boolean
  4. undefined
  5. null
  6. symbol
  7. big number

以及五种引用类型:

  1. 对象
  2. 数组
  3. 方法
  4. 日期
  5. 正则表达式

1.typeof

typeof 是一个用于检测给定变量的数据类型的运算符。它能返回一个表示变量类型的字符串。

使用方法typeof(xxx) 、 typeof xxx :即加括号或空格均可。

使用范围: 可以准确判断 除null之外 的原始数据类型(六种),还可以判断function。

javascript 复制代码
//原理:typeof 将数据转化为2进制数,前面三位是0就是对象
//除null之外 的原始数据类型
console.log(typeof 1);   //number
console.log(typeof 'Bill'); //string
console.log(typeof 123n);  //bigint
console.log(typeof true);  //boolean
console.log(typeof null); //object 历史遗留问题

//2. typeof不能判断引用类型,但是 function 除外
console.log(typeof {}); //object
console.log(typeof []); //object
console.log(typeof function(){}); //function

优点

  1. 简单易用: typeof 是一种简单的方式来获取变量的基本数据类型,特别是在处理基本数据类型时,代码变得简洁而易读。
  2. 适用于原始数据类型
  3. 无需变量声明: typeof 可以在变量未声明的情况下使用,不会抛出错误。这在某些动态环境中可能是一个优点。

缺点:

  1. 不适用于详细类型检查: typeof 并不是一种详细的类型检查工具,特别是对于复杂数据类型(如对象、数组),它只能告诉你它们是对象,而无法区分具体的对象类型。
  2. null 的问题: typeof null 返回 "object",这是 JavaScript 设计的历史遗留问题,可能导致误解。
  3. 无法检测自定义对象类型: 对于自定义的对象类型,typeof 只能返回 "object",而不能区分不同的对象类型。
  4. 不能检测函数参数类型: 在函数参数类型检查的场景中,typeof 通常不够用,因为它不能区分不同的对象类型。

2.instanceof

instanceof 是通过原型链查找来判断数据类型的一个操作符,其结果是返回一个布尔值。

使用方法: object instanceof constructor

其中object是要检查的对象,constructor是要检查的构造函数。instanceof的工作原理是检查object的原型链上是否存在constructor.prototype,有则返回true。

使用范围: 用于判断引用类型。

javascript 复制代码
console.log(instanceOF([],Array)); //true
console.log(instanceOF([],Object)); //true

console.log(instanceOF(obj,Object)); //true
console.log(instanceOF(function(){},Function)); //true
console.log(instanceOF(time,Date)); //true

console.log(str instanceof String);//false

优点:

  1. 简单易用: instanceof 是一种比较简单的类型检测方法,适用于引用类型的判断。
  2. 原型链检测: 通过检查原型链,instanceof 可以检测对象的继承关系,而不仅仅是直接实例关系。

缺点:

  1. 无法跨 iframe 检测: 如果对象是在不同的 iframe 中创建的,instanceof 将返回 false,因为它只在同一全局对象中有效。
  2. 无法准确检测基本类型: instanceof 主要用于检测对象的实例关系,对于基本数据类型(如字符串、数字、布尔值等),它的判断可能会出现错误。

------那么如何解决这些问题呢?

实际开发中,为了更精确地进行类型检查,就会引入下面这种方法

3.object.prototype.toString

Object.prototype.toString 方法是一种用于获取对象的内部属性 [[Class]] 的通用方法。该属性表示对象的内部标识,可以用于进行更准确的类型判断。

使用方法: Object.prototype.toString 方法不是直接调用 的,而是通过以下方式调用:Object.prototype.toString.call。返回由 "object" 和 class 和 "" 三部分组成的字符串,而class表示对象的类型。

使用范围: 适用于一切数据类型

javascript 复制代码
console.log(Object.prototype.toString.call('hello' ));//[object String]
console.log(Object.prototype.toString.call(123)); //[object Number]
console.log(Object.prototype.toString.call(false)); // [object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null)); //[object Null]
console.log(Object.prototype.toString.call(123n)); //[object BigInt]
console.log(Object.prototype.toString.call(Symbol('hello'))); //[object Symbol]
console.log(Object.prototype.toString.call({})); //[object Object]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call(function(){})); //[object Function]
let data = new Date //日期
console.log(Object.prototype.toString.call(data)); //[object Date]

优点: 通过调用 Object.prototype.toString.call,我们可以获取到更准确的类型信息,尤其是对于内置对象和用户自定义对象,对原始数据类型也同样适用。

总结

这篇文章中,我们详细介绍了 JavaScript 中的三种最常用的类型判断方法:typeof 方法、instanceof 方法、Object.prototype.toString.call 方法。

总的来说,本文介绍了这些类型判断方法的用法和优缺点,并强调了在不同情况下选择合适的方法以确保准确性和可靠性。在你的实际项目中,你更倾向于使用哪种类型判断方法呢?你遇到过哪些关于类型判断的挑战?欢迎分享你的经验和看法!

点个免费的赞鼓励支持一下吧! 个人Gitee仓库:Code Space: 记录学习code中的点点滴滴 (gitee.com)

相关推荐
CharlesYu017 小时前
前端性能优化的第一性原理,是不断缩短“用户发起意图 → 获得可用结果”之间的时间
前端
平头哥技术团队7 小时前
Day 21 _ 页内锚点_给每段起个 id,目录写 href=_#id_,点一下页面就滚到那一段
前端·html·html5
子兮曰8 小时前
Bun v1.4.1 深度解析:从 Zig 到 Rust,一场 11 天、64 个 AI 代理的语言迁徙
前端·后端·bun
人民广场吃泡面9 小时前
什么是AI Agent?它又能给前端带来哪些效率提升?
前端·人工智能
中科三方9 小时前
两家域名注册商资质被ICANN终止:企业域名资产安全再受关注
前端·网络·安全·域名
bug总结9 小时前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
华无丽言10 小时前
如何在宜搭中实现获取子表中的字段值赋值到父表中?
前端·javascript·低代码
IT_陈寒10 小时前
Vue的computed属性竟然坑了我一把
前端·人工智能·后端
威斯软科的老司机10 小时前
通俗讲解 CNN 图像识别、向量 Embedding、Softmax 概率计算这三块的简化原理
前端·人工智能·ui·数字孪生
2601_9623824311 小时前
剑指大前端全栈工程师(全2册)主要情节
javascript·实战案例·全栈工程师·剑指大前端·html5+css3