提升代码可读性——谈谈js 中 typeof 运算符

js 中 typeof 运算符的作用与实现原理

js 的 typeof 运算符以变量作为输入，输出该变量的数据类型。一般有以下几种情况：

1. typeof null === "object"
2. typeof undefined === "undefined"
3. typeof 123 === "number"
4. typeof "abc" === "string"
5. typeof [1,2,3] === "object"
6. typeof function(){} === "function"

通过上述输出结果，我们可以了解到 typeof 运算符根据 EcmaScript 的规范，将数据类型分为以下 7 种：

1. object
2. undefined
3. boolean
4. number
5. string
6. symbol（ES6 新增）
7. function

其中，typeof null === "object" 的结果很特别，因为从直觉上来看，null 应该属于 “null” 类型，而不是 “object” 类型。产生这一结果的原因，是因为早期 js 没有 Null 类型，便借用 Object 类型作为 null 的替代。

typeof 运算符的局限性

1. 不能区分不同引用类型

类型：对象、数组、函数

例：

console.log(typeof new Object() === typeof []) // true
console.log(typeof function(){} === typeof []) // true

由于 js 中 typeof 运算符只返回基本数据类型和引用类型两种结果，因此无法区分不同引用类型。这在很多场景下会带来不便，例如，我们需要判断一个变量是否为数组，或者判断一个变量是否为函数时，typeof 运算符就无能为力了。

2. 不能判断基本数据类型的子类型

类型：数字

例：

console.log(typeof 1 === typeof 3.14) // true

对于基本数据类型，typeof 运算符同样无法区分不同子类型。例如，对于数字类型，typeof 运算符无法区分整数和浮点数。这对某些精度的要求很高的场景来说，可能造成判断错误。

typeof 运算符的替代方案

针对 typeof 运算符的局限性，js 社区提出了多种替代方案：

1. 使用 instanceof 运算符判断引用类型

类型：对象、数组、函数

例：

console.log([] instanceof Array) // true
console.log({}) instanceof Object) // true
console.log(function(){} instanceof Function) // true

instanceof 运算符用于判断一个对象是否是某个类型的实例。这可以有效地解决 typeof 运算符无法区分不同引用类型的问题。

2. 使用 Number.isInteger() 判断数字类型的子类型

类型：数字

例：

console.log(Number.isInteger(1)) // true
console.log(Number.isInteger(3.14)) // false

Number.isInteger() 方法用于判断一个数字是否为整数。这可以有效地解决 typeof 运算符无法区分数字类型子类型的问题。

结语

typeof 运算符是 js 中一个非常重要的类型判断工具，但它也存在一定的局限性。为了解决这些局限性，我们可以使用 instanceof 运算符和 Number.isInteger() 方法来辅助判断类型。这可以有效地提升代码的可读性和健壮性。