JavaScript回归基本功之---类型判断--typeof篇

0 阅读4分钟

在学习JavaScript的过程中,我们不难发现一件事,类型判断在我们日常的开发中是最基础也最容易踩坑的知识点之一,我们有时会产生一些困惑

1. 明明被判断的那个数据是一个数组,但 typeof 却返回了 object

2. 使用 instanceof 判断基本类型时得到了一个 false

3. 不知道该用什么方法能够精准的判断一个值的类型

别急,本系列文章中我将带你重新复习一遍 JavaScript 中类型判断的各种方法,从 typeof 到 Object.prototype.toString.call()这些使用场景及底层实现原理,以及开发过程会遇到的难题,让你能够 回归基本功 ,再一次重新认识我们的老朋友 --JavaScript

一、学会类型判断首先我们来了解一下JS中的各种数据类型

1.1 基本类型(原始类型)

  • string : 字符串类型,如: "hello world"
  • number : 数字类型 "123" , "1.1"
  • boolean : 布尔类型 ,true 或 false,
  • undefined : 未定义类型,变量声明但为赋值时的类型
  • null : 空类型,表示一个空对象指针
  • symbol :符号类型,表示唯一且不可变的值
  • bigint: 大整数类型,用于表示超过 number 范围的整数

1.2 引用类型

  • Object :普通对象
  • Array:数组对象
  • Function:函数对象
  • Date:日期对象

1.3 基本类型与引用类型的区别

  • 基本类型存储在栈的内存中,值不可改变。
  • 引用类型存储在堆内存中,变量存储的是指向堆内存的引用地址
  • 基本类型的比较是值的比较,引用类型的比较是引用的比较

二、了解了各种数据类型后,让我们来了解一些常用的类型判断方法

js中的类型判断方法有:

  1. typeof
  2. instanceof
  3. Object.prototype.toString.call()
  4. constructor
  5. Array.isArray

三、本篇文章着重要讲的就是 typeof 这一类型判断方法,typeof 是 JavaScript 中最基础的类型判断操作符,传入一个数据后,它会返回一个表示该传入数据类型的字符串。

image.png

typeof的工作原理

1. typeof 的判断基于 JavaScript 引擎内部的类型标签,每个值在内存中都有一个类型标签:

0: undefined

1: null

2: boolean

3: number

4: string

5: symbol

6: bigint

7: object

8: function

这就能解释为什么 typeof(null) "object" ,因为在js中,null的类型标签为 0 ,于是返回了"object" ,这是一个远古的 bug ,为了向后兼容一直保留至今没有进行修改

2. 什么时候选择使用typeof,为什么?

  1. 对于基本类型进行判断时(null与array除外),如:string、number、boolean、undefined、symbol 或 bigint 类型时,优先使用 typeof。

image.png

原因:typeof 对这些基本类型的判断精准且可靠,语法简单,可读性高,且由于typeof 能直接访问 js 引擎内部的类型标签,是最快的类型判断方法

  1. 当你需要判断一个值是否为函数类型时

image.png

原因: typeof 可以精确识别所有函数类型 ,包括普通函数,箭头函数,生成器函数,异步函数和类,相比于instanceof等其它判断方法,typeof 不需要考虑原型链的问题,且语法更简洁

3. 当你需要检查一个变量是否已经被声明,避免抛出 ReferenceError时

image.png

原因:typeof 是唯一可以安全检查未声明变量的方法,不会抛出 ReferenceError ,这是 typeof 独有的特性,是其它的类型判断方法都不具备的

  1. 当遇到性能敏感的场景时,即需要进行频繁的类型判断且对性能要求高的时候时

image.png

原因:typeof 对这些基本类型的判断精准且可靠,语法简单,可读性高,且由于typeof 能直接访问 js 引擎内部的类型标签,是最快的类型判断方法

3. 什么时候我们不使用typeof

  1. 当需要对 null 类型进行判断时

image.png

  1. 当需要对不同类型的对象进行区分时

image.png

四、总结一下typeof该类型判断方法

  1. 优先用于基本类型判断(除了null 以外)
  2. 用于函数类型判断
  3. 用于检查变量是否已经声明
  4. 性能敏感场景时优先使用
  5. 避免在对复杂对象类型判断时使用(优先使用 instanceof 或 Object.prototype.toString.call())