【JavaScript】JavaScript 变量 ⑧ ( 获取变量数据类型 | 使用 typeof 运算符获取变量数据类型 | 判断空类型 | 判断数组类型 | 获取对象具体类型 )

韩曙亮

发布于 2024-03-18 08:40:38

2010

发布于 2024-03-18 08:40:38

文章被收录于专栏：韩曙亮的移动开发专栏

一、获取变量数据类型

1、使用 typeof 运算符获取变量数据类型

在 JavaScript 中 , 使用 typeof 运算符可以获取一个变量的数据类型 , typeof 表达式返回的是一个表示变量类型的字符串 , 如 :

number : 表示数字类型 ;
string : 表示字符串类型 ;
undefined : 表示未定义类型 ;
boolean : 表示布尔类型 ;
object : 表示复杂对象类型 ;

代码示例 :

let num = 10;  
console.log(typeof num);  // 输出 : number

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        let num = 10;
        console.log(typeof num); // 输出 "number"  

        let str = "Hello";
        console.log(typeof str); // 输出 "string"  

        let obj = {};
        console.log(typeof obj); // 输出 "object"  

        let boolVar = true;
        console.log(typeof boolVar); // 输出 "boolean"  

        let undefVar;
        console.log(typeof undefVar); // 输出 "undefined"  

        let nullVar = null;
        // 这是 JavaScript 的一个历史错误 , null 不是对象类型 , 而是 空类型 
        console.log(typeof nullVar); // 输出 "object"

        let funcVar = function() {};
        console.log(typeof funcVar); // 输出 "function"  

        let symVar = Symbol('symbol');
        // ES6 及更高版本
        console.log(typeof symVar); // 输出 "symbol"
    </script>
</head>

<body>
</body>

</html>

展示效果 :

2、判断空类型

对于空类型值 null , 使用 typeof 运算符获取 null 值的类型 , 会返回类型为 object , 这是一个JavaScript的历史错误 ;

要检测一个变量是否为 null , 直接使用 variable === null 进行判断 ;

代码示例 :

        let nullVar = null;
        // 这是 JavaScript 的一个历史错误 , null 不是对象类型 , 而是 空类型 
        console.log(typeof nullVar); // 输出 : object

        console.log(nullVar === null); // 输出 : true

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        let nullVar = null;
        // 这是 JavaScript 的一个历史错误 , null 不是对象类型 , 而是 空类型 
        console.log(typeof nullVar); // 输出 : object

        console.log(nullVar === null); // 输出 : true
    </script>
</head>

<body>
</body>

</html>

展示效果 :

3、判断数组类型

对于数组类型变量 , 使用 typeof 运算符获取数组变量的类型 , 会返回类型名称为 object ;

要检测一个变量是否为数组 , 需要使用 Array.isArray(arrVar) 进行判断 ;

代码示例 :

        // 数组类型变量
        let arrVar = [];
        console.log(typeof arrVar); // 输出 object

        console.log(Array.isArray(arrVar)); // 输出 true

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组类型变量
        let arrVar = [];
        console.log(typeof arrVar); // 输出 object

        console.log(Array.isArray(arrVar)); // 输出 true
    </script>
</head>

<body>
</body>

</html>

展示效果 :

4、获取对象具体类型

使用 variable instanceof ClassName 可以检测特定类型的对象是否是指定的类型 ;

使用 Object.prototype.toString.call(variable) 来获取更详细的对象类型信息 ;

代码示例 :

        // 检测 特定类型的 对象 是否是 指定的类型
        let date = new Date();

        // 判断 date 变量是否是 Date 类型
        console.log(date instanceof Date); // 输出 : true

        // 输出 date 变量 的 具体类型
        console.log(Object.prototype.toString.call(date)); // 输出 : [object Date]

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 检测 特定类型的 对象 是否是 指定的类型
        let date = new Date();

        // 判断 date 变量是否是 Date 类型
        console.log(date instanceof Date); // 输出 : true

        // 输出 date 变量 的 具体类型
        console.log(Object.prototype.toString.call(date)); // 输出 : [object Date]
    </script>
</head>

<body>
</body>

</html>

展示效果 :