迹忆客 专注技术分享

与 C、Java 等其他编程语言相比，JavaScript 使开发人员可以自由地使用单个关键字（var 关键字）定义任何类型的变量。反过来，JavaScript 会根据分配给这些变量的值来决定变量的数据类型。确定变量的数据类型似乎很容易。但是有些情况可以让我们解决问题。特别是在服务器的 REST API 响应返回值的情况下，我们可能需要在进一步编码处理之前知道值或变量的类型。

使用 typeof 运算符查找变量的类型

typeof 是 JavaScript 中的一元运算符，它返回应用它的操作数的类型。它通常将变量类型作为字符串对象返回。javascript 中的 typeof 操作符有标准的返回类型。

• string：typeof 返回 string 用于变量类型字符串。
• number：它为保存整数或浮点值的变量返回 number。
• boolean：对于保存 true 或 false 值的变量，typeof 返回 boolean。
• undefined：如果我们不为变量赋值，则变量的类型将被 JavaScript 标记为 undefined。因此，对于此类未声明的变量，typeof 操作数将返回 undefined。
• object：对于保存数组的变量，或 {} 中的对象，或分配有 null 值的变量，javascript 将此类变量的类型视为对象。因此，typeof 操作数将返回 object。
• function：JavaScript 允许我们将函数分配给变量。对于这种情况，此类变量的类型将是 function。typeof 运算符将为函数赋值返回 function。

以下代码片段演示了 typeof 运算符在不同变量赋值和不同场景下的行为。

var s1 = "hello";
var n1 = 120;
var n1 = 11.1234;
var b1 = true;
var x;
var u = undefined;
var o1 = null;
var o2 = { id: 1, value: 200 };
var o3 = [1,2,3];
var f = function() { return 1 + 2 };

console.log(typeof s1);
console.log(typeof n1);
console.log(typeof n1);
console.log(typeof b1);
console.log(typeof x);
console.log(typeof u);
console.log(typeof o1);
console.log(typeof o2);
console.log(typeof o3);
console.log(typeof f);

输出：

"string"
"number"
"number"
"boolean"
"undefined"
"undefined"
"object"
"object"
"object"
"function"

在条件检查中使用 typeof 运算符

我们可以在条件检查中使用 typeof 运算符，例如在 if 块中，通过检查运算符返回的值并将其与标准类型值进行比较。我们使用 === 运算符进行比较，因为它包括对运算符两端操作数的类型检查。

var a = "hello";
if (typeof a === "string") {
    console.log(true)
}

输出：

true

同样，我们可以对 number、boolean、object 甚至是 function 进行条件检查。作为最佳实践，我们应该为 JavaScript 的 typeof 运算符返回的标准数据类型创建一个常量变量。然后，将变量的 typeof 与声明的常量进行比较。这种方法可以在编写条件块时轻松编码并减少拼写错误，这些条件块通常不会一目了然。参考以下代码更好理解。

const STRING_TYPE = "string";
const NUMBER_TYPE = "number";
var a = "hello";
var b = 123;
if (typeof a === STRING_TYPE) {
    console.log(true)
}
if (typeof b === NUMBER_TYPE) {
    console.log(true)
}

输出：

true
true

总结

• 对于使用 new 关键字分配变量的情况，javascript 会将此类分配视为对象。因此，对于此类赋值，typeof 运算符将返回 object。参考以下代码。

var s = new String("hello");
var n = new Number(100);
console.log(typeof s);
console.log(typeof n);

输出：

object
object

• 如果我们使用 new 关键字分配函数，则此类变量的数据类型将被 javascript 视为函数。带有 new function() 的 typeof 变量将作为 function 而不是 object 返回。让我们看看下面的代码。

var fn = new Function();

输出：

"function"

• 所有浏览器都支持 javascript 的 typeof 运算符，包括旧版本的 Internet Explorer。因此，我们可以在支持多个浏览器的项目中毫无顾虑地使用运算符。