JavaScript typeof 运算符

JavaScript 中的 typeof 运算符是一个一元运算符，用来获取特定变量的数据类型。它位于其单个操作数之前，该操作数可以是任何类型。它返回一个字符串值来指示其操作数的数据类型。JavaScript 包含原始数据类型和非原始数据类型。

JavaScript 中有七种原始或基本数据类型：number、string、boolean、undefined、null、symbol 和 bigint。还有一种复合数据类型叫做 object。对象数据类型包含三个子数据类型：Object、Array 和 Date。

语法

以下是 typeof 运算符的语法：

typeof (operand);

我们也可以不带括号地写操作数如下：

typeof operand;

参数

operand − 它可以是一个代表对象或原始值的值、变量或表达式。在 JavaScript 中，原始值不是对象，并且没有方法或属性。

返回值

它返回代表操作数数据类型的字符串值。

`typeof` 运算符返回的数据类型

以下是 typeof 运算符返回值的列表：

类型	`typeof` 返回的字符串
Number	"number"
String	"string"
Boolean	"boolean"
Object	"object"
Function	"function"
Undefined	"undefined"
Null	"object"
Symbol	"symbol"
Bigint	"bigint"

JavaScript 中有七种原始数据类型：number、string、boolean、bigint、undefined、null 和 symbol。typeof 运算符有助于识别这些原始或基本数据类型。

typeof 运算符除了对 null 返回 "object" 外，对于所有原始值返回相同的数据类型。

对于对象、日期和数组，它返回 "object" 作为数据类型。

对于函数和类，它返回 "function" 作为数据类型。

让我们逐一使用 typeof 运算符来识别这些数据类型。

typeof 10;       // returns 'number'
typeof 'Hello World'; // returns 'string'
typeof true;     // returns 'boolean'
typeof {name:"Tutorialspoint"}; // returns 'object'
typeof function foo(){};// returns 'function'
typeof undefined; // returns 'undefined'
typeof null;      // returns 'object'
typeof Symbol();  // returns 'symbol'
typeof 10n;       // returns 'bigint'

使用 `typeof` 运算符检查数字类型

在 JavaScript 中，数字类型表示数值。JavaScript 对所有数字使用浮点表示。JavaScript typeof 运算符对于所有类型的数字（如整数、浮点数、零、Infinity、NaN 等）返回 'number'。

typeof 10; //returns "number";
typeof -10; //returns "number";
typeof 0; //returns "number";
typeof 10.20; //returns "number";
typeof Math.LN10; //returns "number";
typeof Infinity; //returns "number";
typeof NaN; //returns "number";
typeof Number('1'); //returns "number";
typeof Number('hello'); //returns "number";

示例

下面的示例演示了如何使用 typeof 运算符来检查数字数据类型。

<html>
   <body>
      <p> 使用 `typeof` 运算符来检查数字数据类型 </p>
      <div id="output"></div>
      <script>
         let num = 42;
         document.getElementById("output").innerHTML = typeof num;
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

使用 `typeof` 运算符来检查数字数据类型
number
设置变量为不同的值然后尝试...

使用 `typeof` 运算符检查字符串类型

字符串代表字符序列。typeof 运算符帮助识别字符串变量。JavaScript typeof 运算符对于所有类型的字符串（如空字符串、字符字符串、字符串单词、多行字符串等）返回 "string"。

typeof "10"; //returns "string";
typeof ""; //returns "string";
typeof "Hello World"; //returns "string";
typeof String(10); //returns "string";
typeof typeof 2; //returns "string";

示例

在下面的示例中，我们使用 typeof 运算符来检查字符串数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let str = "Hello World";
         document.getElementById("output").innerHTML = typeof str;
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

string
设置变量为不同的值然后尝试...

使用 `typeof` 运算符检查布尔类型

布尔值表示真或假。typeof 运算符返回布尔变量的布尔值。

typeof true; //returns "boolean";
typeof false; //returns "boolean";
typeof Boolean(10); //returns "boolean";

示例

在下面的示例中，我们使用 typeof 运算符来检查布尔数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let bool = true;
         document.getElementById("output").innerHTML = typeof bool;
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

boolean
设置变量为不同的值然后尝试...

使用 `typeof` 运算符检查 Symbol 类型

符号是在 ES6 中引入的，并提供了一种创建唯一标识符的方法。使用 typeof 运算符与符号一起返回 "symbol"。

typeof Symbol(); //returns "symbol";
typeof Symbol("unique values"); //returns "symbol";

示例

在下面的示例中，我们使用 typeof 运算符来检查 Symbol 数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let sym = Symbol("Hello");
         document.getElementById("output").innerHTML = typeof sym;
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

symbol
设置变量为不同的值然后尝试...

使用 `typeof` 运算符检查 Undefined 和 Null

"undefined" 类型表示缺乏值。"null" 类型表示缺少任何对象值。当使用 typeof 运算符与未定义变量一起时，它返回 'undefined'。令人惊讶的是，使用 typeof 运算符与 null 也返回 "object"，这是 JavaScript 中的一个已知怪癖。

typeof undefined; //returns "undefined";
typeof null; //returns "object";

请注意 typeof 运算符会为未声明的变量和声明但未赋值的变量返回 "undefined"。

示例

在下面的示例中，我们使用 typeof 运算符来检查 undefined 数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         let x;
         document.getElementById("output").innerHTML = typeof x;
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

undefined
设置变量为不同的值然后尝试...

使用 `typeof` 运算符检查对象类型

JavaScript typeof 运算符对于所有类型的对象（如 JavaScript 对象、数组、日期、正则表达式等）返回 "object"。

const obj = {age: 23};
typeof obj; //returns "object";
const arr = [1,2,3,4];
typeof arr; //returns "object";
typeof new Date(); //returns "object";
typeof new String("Hello World"); //returns "object";

示例

在下面的示例中，我们使用 typeof 运算符来检查对象数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         const person = {name: "John", age: 34};
         document.getElementById("output").innerHTML = typeof person;
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

object
设置变量为不同的值然后尝试...

使用 `typeof` 运算符检查函数类型

函数在 JavaScript 中是一等公民。JavaScript typeof 运算符对于所有类型的函数返回 "function"。有趣的是，它也为类返回 "function"。

const myFunc = function(){return "Hello world"};
typeof myFunc; //returns "function";
const func = new Function();
typeof func; //returns "function";
class myClass {constructor() { }}
typeof myClass; // returns "function";

`typeof` 运算符示例

在下面的示例中，我们使用 typeof 运算符来检查函数的数据类型。

<html>
   <body>
      <div id="output"></div>
      <script>
         const myFunc = function(){return "Hello world"};
         document.getElementById("output").innerHTML = typeof myFunc;
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

function
设置变量为不同的值然后尝试...

`typeof` 运算符检查 `BigInt` 类型

typeof 运算符对于 BigInt 数字返回 "bigint"。BigInt 值是那些太大而无法用数字原始类型表示的数值。

typeof 100n; // returns "bigint"

`typeof` 运算符在实际开发中的应用

例如，开发者从 API 获取数据。如果只有一个字符串，API 返回字符串响应；而对于多个字符串，API 返回字符串数组。在这种情况下，开发者需要检查响应的类型是否为字符串或数组，并且如果它是数组，则需要遍历数组中的每一个字符串。

示例

在下面的示例中，我们检查 ‘response’ 变量的类型，并相应地打印其值。

<html>
   <body>
      <script>
         const response = ["Hello", "World!", "How", "are", "you?"];

         if (typeof response == "string") {
            document.write("The response is - ", response);
         } else {
            document.write("The response values are : ");
   
            // 遍历数组
            for (let val of response) {
               document.write(val, " ");
            }
         }
      </script>
   </body>
</html>

输出：

The response values are : Hello World! How are you?

JavaScript 数组与 `typeof` 运算符

尽管数组在 JavaScript 中是一种对象类型，但是它们与 typeof 运算符具有独特的交互行为。

let numbers = [1, 2, 3];
typeof numbers; // Output: 'object'

数组在使用 typeof 运算符时返回 "object"，因此为了精确检测数组，通常最好使用 Array.isArray() 方法。

示例

<html>
   <body>
      <div id="output"></div>
      <script>
         let numbers = [1, 2, 3];
         document.getElementById("output").innerHTML = Array.isArray(numbers);
      </script>
      <p>设置变量为不同的值然后尝试...</p>
   </body>
</html>

输出：

true
设置变量为不同的值然后尝试..