当前位置: 首页 > news >正文

深入了解JavaScript当中如何确定值的类型

JavaScript是一种弱类型语言,当你给一个变量赋了一个值,该值是什么类型的,那么该变量就是什么类型的,并且你还可以给一个变量赋多种类型的值,也不会报错,这就是JavaScript的内部机制所决定的,那么当我们在使用一些方法的时候,必须知道该变量是什么类型的,才能调用该变量对应的一些方法,那么我们如何获取到值的变量呢?

这里我们有三种方法

1.typeof  2.instanceof 3.Object.prototype.toString  下面我将详细讲解一下这三个方法

typeof:

作用:判断一个变量类型

底层原理:js中为了提高性能效率,使用值编码来存储值的类型,读取值编码当中的类型标签位,根据标签值返回对应的类型字符串

类型判断流程:先区分「直接量」与「指针」

直接量表:

数据类型存储形式第 0 位类型判定关键
Boolean小整数(SMI)0值为 0 或 2,且最低位为 0(SMI 标记)。
Number(SMI)32 位有符号整数(SMI)0值非 0/2,且最低位为 0(SMI 标记)。
Undefined全局特殊值(单例)直接比较值是否为 undefined 全局变量,typeof 直接返回 "undefined"

指针表: 

数据类型存储形式低 3 位标签类型判定关键
普通 Object指针000低 3 位为 000
HeapNumber(浮点数)指针001低 3 位为 001
String指针110低 3 位为 110
Symbol指针100低 3 位为 100
BigInt指针101低 3 位为 101
Function(函数)指针011低 3 位为 011
null空指针000

这里null比较特殊,他的低三位和对象object一样,所以会被typeof误判为object对象

这里举一些比较常见的事例: 

console.log(typeof undefined);    // 输出:"undefined"
console.log(typeof null);         // 输出:"object"
console.log(typeof true);         // 输出:"boolean"
console.log(typeof 42);           // 输出:"number"
console.log(typeof "hello");      // 输出:"string"
console.log(typeof Symbol("key"));// 输出:"symbol"
console.log(typeof 100n);         // 输出:"bigint"
console.log(typeof (() => {}));   // 输出:"function"
console.log(typeof {});           // 输出:"object"//特殊情况
console.log(typeof /test/g); // "object"
console.log(typeof Infinity); // "number"
console.log(typeof NaN); // "number"
console.log(typeof undeclaredVar); // "undefined"(不会报错)

instanceof:

概念:instanceof 是一种操作符,用于判断一个对象是否是某个类(Class)或接口(Interface)的实例。这里需要注意的是,instanceof只能判断对象,不能判断基本类型

原理: instanceof 操作符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上  左边实例对象的内部属性通过 Object.getPrototypeOf() 方法来访问[[Prototype]]

//这里表示instanceof不能直接用于基本类型
console.log(42 instanceof Number); // false//可以将基本类型通过内置构造函数包装成对象
const numObj = new Number(42);
console.log(numObj instanceof Number); // trueconsole.log([] instanceof Array); // true
console.log([] instanceof Object); // true
console.log({} instanceof Object); // true

Object.prototype.toString:

概念:

这个方法可以判断一个变量的具体类型,是最精确的检测方式,返回的是一个【object type】格式字符串,它可以识别到所有内置对象的类型

使用方法:

// 基本类型和内置对象
Object.prototype.toString.call({}); // [object Object]
Object.prototype.toString.call([]); // [object Array]
Object.prototype.toString.call(new Date()); // [object Date]
Object.prototype.toString.call(new MyClass()); // [object Object] (默认)

和typeof对比:

类型typeof 结果Object.prototype.toString.call() 结果
[]"object"[object Array]
new Date()"object"[object Date]
/abc/"object"[object RegExp]
null"object"[object Null]
undefined"undefined"[object Undefined]
Symbol(1)"symbol"[object Symbol]

相关文章:

  • 几何引擎对比:OpenCasCade、ACIS、Parasolid和CGM
  • 讲解:Java I/O 流体系,并举例每个类的使用
  • 一站式万能邮箱:如何实现多平台邮件管理?
  • 使用绑定参数以防止SQL注入攻击
  • SpringBoot自动配置原理深度解析
  • Flutter:下拉框选择
  • 【Linux 学习计划】-- 进程程序替换
  • 硅基计划2.0 学习总结 陆 抽象类与接口
  • JavaWeb笔记
  • MySQL查询语句
  • pikachu靶场通关笔记17 CSRF关卡03-CSRF(Token)
  • [蓝桥杯]矩阵翻硬币
  • maven微服务${revision}依赖打包无法识别
  • 王自如走上了罗永浩的老路
  • 使用VTK还是OpenGL集成到qt程序里哪个好?
  • 马氏链(Markov Chain Model)模型知识详解(1)
  • 使用 espeak-ng 实现文本转语音
  • 基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
  • Qwen2.5-VL - FFN(前馈神经网络)Feedforward Neural Network
  • Java持久层技术对比:Hibernate、MyBatis与JPA的选择与应用
  • 中央人民政府网站克褔单/百度seo搜索排名
  • 做vr效果图的网站/网站访问量统计工具
  • 成都微信网站建设公/网站模板价格
  • 遵义城乡建设网站/百度 个人中心首页
  • 程序员做音乐网站/英文站友情链接去哪里查
  • 北京h5网站建设报价/什么是网络整合营销