JavaScript（JS）的 typeof 运算符如何使用？一文讲解 typeof 的用法

JavaScript 中的 typeof 运算符是一种用于获取给定值的数据类型的操作符。它可以帮助开发人员在运行时确定变量的数据类型并采取适当的操作。在本文中，我们将探讨 typeof 运算符的基本概念、用法以及提供实践案例和互动练习，以帮助您更好地理解和掌握该运算符。

javascript js 中的 typeof 运算符使用方法 — MDN 的 javascript 文档

typeof 运算符的基本概念

typeof 运算符是 JavaScript 中的一元运算符，用于获取给定值的数据类型。它返回一个表示数据类型的字符串，包括以下几种可能的结果：

"undefined"：表示值未定义或不存在。
"boolean"：表示值为布尔类型。
"number"：表示值为数字类型，包括整数和浮点数。
"string"：表示值为字符串类型。
"bigint"：表示值为大整数类型（ES2020 新增）。
"symbol"：表示值为符号类型（ES2015 新增）。
"function"：表示值为函数类型。
"object"：表示值为对象或 null。
"typeof"：表示值为类型为 "function" 的函数。
"typeof"：表示值为类型为 "object" 的对象。需要注意的是，typeof null 返回 "object"，这是 JavaScript 语言中的一个历史遗留问题。

typeof 运算符的使用方式

typeof运算符可以使用在多种情况下，用于确定值的数据类型。以下是几种常见的使用方式：

判断基本数据类型：

typeof 42;        // "number"
typeof "hello";   // "string"
typeof true;      // "boolean"
typeof undefined; // "undefined"

判断函数：

typeof function() {}; // "function"

判断对象和数组：

typeof {} // "object"
typeof []; // "object"

判断 null：

typeof null; // "object"

判断 Symbol（ES6中引入的数据类型）：

typeof Symbol();   // "symbol"

判断其它：

typeof new Date(); // "object"

实践案例

让我们来看一个实际的案例，通过浏览器控制台来理解typeof的使用：

// 在浏览器的控制台中执行以下代码
const value1 = 42;
const value2 = "hello";
const value3 = [1, 2, 3];
const value4 = { key: "value" };
const value5 = null;

console.log(typeof value1); // "number"
console.log(typeof value2); // "string"
console.log(typeof value3); // "object"
console.log(typeof value4); // "object"
console.log(typeof value5); // "object"

javascript js 的 typeof 运算符操作实例 — JavaScript 的 typeof 运算符操作实例

互动练习

1.根据下面的代码，确定变量 myVar 的数据类型，并将结果打印在控制台上：

let myVar;
console.log(typeof myVar);

参考答案："undefined"

2.根据下面的代码，判断 str 的数据类型是否为字符串，并将结果打印在控制台上：

let str = "Hello";
if (typeof str === "string") {
  console.log("str 是一个字符串");
} else {
  console.log("str 不是一个字符串");
}

参考答案：输出 "str 是一个字符串"

提示、技巧或注意事项

typeof 运算符返回的是一个字符串，所以在进行类型判断时需要使用字符串进行比较。
注意 typeof null 的结果是 "object"，这是 JavaScript 语言中的一个历史遗留问题。
记住typeof返回的是一个字符串，表示目标值的数据类型。
对于数组、对象、null以及ES6中的Symbol，typeof返回的都是"object"，这是一个常见的陷阱。
在进行类型判断时，谨慎处理特殊情况，例如使用Array.isArray()来判断数组。

通过 Apifox 调试后端接口

Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。

立即体验 Apifox

总结

typeof运算符是 JavaScript 中用于确定值的数据类型的重要工具，通过正确使用 typeof 运算符，我们可以更好地处理不同类型的数据，提高 JavaScript 编程的效率和准确性。

知识扩展：

参考链接：MDN Web 文档：typeof

JavaScript（JS） 的 typeof 运算符如何使用？一文讲解 typeof 的用法