【JavaScript】JavaScript 变量 ⑦ ( JavaScript 数据类型 | Boolean 布尔类型 | Undefined 类型 | Null 类型 )

韩曙亮

发布于 2024-03-18 08:39:55

10800

代码可运行

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

运行总次数：0

代码可运行

一、 JavaScript 数据类型 - Boolean 布尔类型

1、Boolean 类型简介

在 JavaScript 中 , Boolean 布尔类型是基本数据类型之一 ,

Boolean 类型有两个值 : true 和 false ;

Boolean 布尔数据类型的最主要使用场景 :

进行逻辑比较
条件语句 / 循环控制流程

代码示例 : 在下面的代码中 , 声明了变量 , 并为其赋值一个 Boolean 布尔类型值 ;

let isTrue = true;  
let isFalse = false;

完整代码示例 :

<!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>
        // Boolean 布尔类型

        // 声明了变量 , 并为其赋值一个 Boolean 布尔类型值
        let isTrue = true;
        console.log(isTrue);

        let isFalse = false;
        console.log(isFalse);
    </script>
</head>

<body>
</body>

</html>

展示效果 :

2、Boolean 类型转换

在 JavaScript 中 , 可以将其他数据类型转换为布尔值 ;

如 : 在条件语句中 , 非布尔值会被自动转换为布尔值 ;

布尔值转换规则 :

false、0、“”、null、undefined、NaN 转为布尔值为 false ;
其他所有值转为布尔值为 true ;

布尔值转换场景 :

自动转换 : 在条件语句中 , 凡是放入条件控制表达式的变量 , 都会被自动转为布尔值 ;
手动转换换 : 使用 Boolean() 函数可以手动显式地进行布尔值转换 ;

代码示例 :

console.log(Boolean(0));        // false  
console.log(Boolean(1));        // true  
console.log(Boolean(""));       // false  
console.log(Boolean("hello"));  // true  
console.log(Boolean(null));     // false  
console.log(Boolean(undefined));// false

完整代码示例 :

<!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>
        // Boolean 布尔类型

        console.log(Boolean(0)); // false  
        console.log(Boolean(1)); // true  
        console.log(Boolean("")); // false  
        console.log(Boolean("hello")); // true  
        console.log(Boolean(null)); // false  
        console.log(Boolean(undefined)); // false
    </script>
</head>

<body>
</body>

</html>

展示效果 :

二、 JavaScript 数据类型 - Undefined 类型

1、Undefined 类型简介

在 JavaScript 中 , Undefined 类型表示变量没有被赋值 , 是 JavaScript 的基础数据类型之一 ;

Undefined 类型只有一个值 , 那就是 undefined ;

当一个变量被声明 , 但是没有被赋值 , 该变量的值就是 undefined , 变量类型就是 Undefined 类型 ;

代码示例 :

let undefinedVar;  
console.log(undefinedVar); // 输出 undefined

2、Undefined 类型值与其它值相加

undefined 与字符串相加 , 其结果就是将 “undefined” 与其它字符串拼接得到的新字符串 ;

undefined 与数字相加 , 得到的结果是 NaN , 非数字值 ;

示例 :

let undefinedVar;  
console.log(undefinedVar); // 输出 : undefined

console.log(undefinedVar + " Hello"); // 输出 : undefined Hello

console.log(undefinedVar + 1); // 输出 : NaN

完整示例 :

<!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>
        // Undefined 类型

        let undefinedVar;
        console.log(undefinedVar); // 输出 : undefined

        console.log(undefinedVar + " Hello"); // 输出 : undefined Hello

        console.log(undefinedVar + 1); // 输出 : NaN
    </script>
</head>

<body>
</body>

</html>

显示结果 :

三、 JavaScript 数据类型 - Null 类型

在 JavaScript 中 , Null 类型是特殊的类型 , 表示一个空或不存在的引用 , 该类型只有一个值的数据类型 , 即 null 本身 ;

Null 类型和 Undefined 类型都是假值

Undefined 类型表示变量未被赋值
Null 类型表示变量被明确赋值为一个空值 ;

null 值与字符串类型相加 , 相当于 “null” 与字符串进行拼接 ;

null 值与数字相加 , 等于数字本身 , null 值相当于 0 ;

代码示例 :

let nullVar = null;  
if (nullVar === null) {  
    console.log('nullVar 是 Null 空类型');  
}

console.log(nullVar  + ' Hello');  

console.log(nullVar  + 1);

完整示例 :

<!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>
        // Null 类型

        let nullVar = null;
        if (nullVar === null) {
            console.log('nullVar 是 Null 空类型');
        }

        console.log(nullVar + ' Hello');

        console.log(nullVar + 1);
    </script>
</head>

<body>
</body>

</html>

展示效果 :