如何判断变量是 ‘undefined’ 还是 ‘null’

技术背景

在 JavaScript 编程中，经常需要判断一个变量是否为 undefined 或 null。undefined 通常表示变量已声明但未赋值，或者函数没有返回值；而 null 表示变量被明确赋值为一个空对象指针。正确判断这两种情况对于编写健壮的代码非常重要。

实现步骤

1. 使用抽象相等运算符 ==

if (variable == null) {
    // 代码逻辑
}

由于 null == undefined 的结果为 true，所以上述代码可以同时捕获 null 和 undefined。

2. 使用严格相等运算符 === 分别判断

if (variable === undefined || variable === null) {
    // 代码逻辑
}

这种方式更加明确，但代码相对冗长。

3. 使用 typeof 结合判断

if (typeof variable === 'undefined' || variable === null) {
    // 代码逻辑
}

此方法适用于未声明的变量或已声明且显式设置为 null 或 undefined 的变量。

4. 使用自定义函数判断

function empty(v) {
    let type = typeof v;
    if (type === 'undefined') {
        return true;
    }
    if (type === 'boolean') {
        return !v;
    }
    if (v === null) {
        return true;
    }
    if (v === undefined) {
        return true;
    }
    if (v instanceof Array) {
        if (v.length < 1) {
            return true;
        }
    } else if (type === 'string') {
        if (v.length < 1) {
            return true;
        }
        if (v === '0') {
            return true;
        }
    } else if (type === 'object') {
        if (Object.keys(v).length < 1) {
            return true;
        }
    } else if (type === 'number') {
        if (v === 0) {
            return true;
        }
    }
    return false;
}

该函数可以判断变量是否为空，考虑了 undefined、null、false、0、0.0、"0"、{}、[] 等情况。

5. 使用新的逻辑运算符 ??=

EmpName ??= 'some value';

这等价于：

if (EmpName == null) {
    EmpName = 'some value';
}

6. 使用可选链操作符

if (a?.valueOf() === undefined) {
    // a 是 null 或 undefined
}

或者

if (a?.constructor === undefined) {
    // a 是 null 或 undefined
}

7. 使用 Object.is 和 ??

if (Object.is(a ?? null, null)) {
    // a 是 null 或 undefined
}

最佳实践

• 在专业的 JavaScript 开发中，通常使用 if (variable == null) 这种简洁的方式来同时判断 null 和 undefined。
• 对于需要判断多种空值情况（如 NaN、空字符串等），可以使用自定义函数 empty。
• 当需要为可能为 null 或 undefined 的变量赋默认值时，使用 ??= 运算符更加简洁。

常见问题

1. 使用 == 和 === 的区别

== 是抽象相等运算符，会进行类型转换；而 === 是严格相等运算符，不会进行类型转换。在判断 null 和 undefined 时，== 更简洁，但需要理解其类型转换规则。

2. 变量未声明的情况

如果使用 if (variable == null) 或 if (variable === undefined) 来判断未声明的变量，会抛出 ReferenceError。可以使用 typeof 来避免这种情况，或者使用 try/catch 处理异常。

3. jQuery 中的判断

在 jQuery 中，可以使用 jQuery.isEmptyObject 函数来判断变量是否为 undefined 或 null，但该函数对于非对象类型的变量判断可能不符合预期。