【JavaScript基础】Null类型详解

在JavaScript中，Null是一个原始数据类型，表示变量被明确赋值为空值或"无值"状态。

1. Null类型主要场景

1）变量初始化

let user = null;
user = { name: 'cxh', age: 18 };

2）函数返回值

// 函数找不到结果时返回 null
function findUser(id) {
    const users = [
        { id: 1, name: 'cxh001' },
        { id: 2, name: 'cxh002' }
    ];
    return users.find(user => user.id === id) || null;
}
console.log(findUser(3)); // null

// 操作失败时返回 null
function parseJSON(str) {
    try {
        return JSON.parse(str);
    } catch (error) {
        return null;
    }
}

3）DOM操作

    // 获取不存在的元素返回 null
    const nonExistentElement = document.getElementById('non-existent');
    console.log(nonExistentElement); // null

    // 移除元素后设置为 null
    let element = document.getElementById('myElement');
    element?.parentNode?.removeChild(element);
    element = null; // 帮助垃圾回收

4）对象属性的清理

    const app = {
        cache: {},
        config: null
    };
    // 使用缓存后清理
    app.cache.userData = { /* 大量数据 */ };
    // 释放内存
    app.cache.userData = null;

5）函数的可选参数

    function createUser(name, details = null) {
        return {
            name,
            details
        };
    }
    console.log(createUser('cxh')); // {name: 'cxh', details: null}

6）API 响应处理

    // 常见于数据库查询结果
    const apiResponse = {
        success: true,
        data: null, // 没有找到数据
        message: 'User not found'
    };
    // 或者
    async function getUserProfile(userId) {
        const response = await fetch(`/api/users/${userId}`);
        const result = await response?.json();
        return result?.data || null; // 有数据返回数据，没有返回 null
    }

7）状态管理

    class AuthService {
        currentUser = null;
        token = null;

        constructor() {}

        login(userData, authToken) {
            this.currentUser = userData;
            this.token = authToken;
        }

        logout() {
            this.currentUser = null;
            this.token = null;
        }
    }

8）配置和选项

    function initializeApp(config = {}) {
        const defaults = {
            apiUrl: 'https://api.example.com',
            timeout: 5000,
            retryCount: null, // 不重试
            logger: null // 不记录日志
        };
        return { ...defaults, ...config };
    }

9）未匹配到正则

    // RegExp.exec() 方法没有匹配
    const regex1 = /hello (\w+)/;
    const str = 'goodbye world';
    console.log(regex1.exec(str)); // null

    // String.match() 没有匹配结果
    const regex2 = /(\d{3})-(\d{3})-(\d{4})/;
    const phone = '没有电话号码';
    console.log(phone.match(regex2)); // null

2. 检测Null的方法

1）严格相等

    let value = null;
    if (value === null) {
        console.log('Value is null'); // Value is null
    }

2）联合检查Null和Undefined

    let value;
    if (value == null) {
        console.log('Value is null or undefined'); // Value is null or undefined
    }

3）使用可选链操作符安全访问

    const userName = user?.profile?.name ?? 'default';

3. Undefined和Null的异同

特性	Undefined	Null
类型	独立类型(Undefined)	独立类型(Null)
含义	变量声明但未赋值	表示一个空对象指针
默认值	函数无返回值时的默认返回	需显式赋值
相等性	undefined == null → true	undefined === null → false
类型检测	typeof undefined → 'undefined'	typeof null → 'object'
转换为数字	Number(undefined) → NaN	Number(null) → 0
转换为布尔值	Boolean(undefined) → false	Boolean(null) → false
转换为字符串	String(undefined) → 'undefined'	String(null) → 'null'