JavaScript 处理 null 和 undefined 的常用技巧：可选链、空值合并与优化判断

1. 可选链操作符（?.）

const user = {
    address: {
        city: "Beijing"
    }
};
console.log(user.address?.city); // 输出 "Beijing"
console.log(user.unknown?.city); // 输出 undefined

当尝试访问链式属性但下一层属性不存在时，该操作符会直接返回 undefined，从而避免抛出 TypeError 错误。

2. 空值合并操作符（??）

当 ?? 左侧的值严格等于 null 或 undefined 时，表达式将返回右侧的默认值；否则返回左侧的实际值。

console.log(null ?? "default"); // 输出 "default"
console.log(undefined ?? "default"); // 输出 "default"
console.log("Hello" ?? "default"); // 输出 "Hello"
console.log("" ?? "default"); // 输出 ""
console.log(0 ?? "default"); // 输出 0
console.log(false ?? "default"); // 输出 false
console.log(false || "default"); // 输出 default

注意 ?? 和 || 的区别 ??：仅仅在 null 和 undefined 时返回 defaultValue ||:不仅会在 null 和 undefined 时返回 defaultValue，也会在 false, 0, '' (空字符串) 等其他假值情况下返回默认值defaultValue

3. 优化判断

一般在判断if语句时候，经常会有类似的判断。
if(a.aa === undefined || a.aa === null || a.aa === ''){
}

可以通过更简洁且可读性更高的方式来优化对 null 和 undefined 的检查。以下是几种常见的优化策略：

3.1 使用 == 进行宽松比较

利用宽松相等运算符 == 可以一次性检查 undefined 和 null，因为 JavaScript 中 null == undefined 为 true：

if (a.aa == null || a.aa === '') {
    // 处理逻辑
}

3.2 使用逻辑非运算符 !

可以借助逻辑非运算符 ! 来检测 falsy 值（包括 undefined、null、''、0、NaN 和 false）：

if (!a.aa) {
    // 处理逻辑
}

不过需要注意，这种方式会将所有 falsy 值都视为 true。如果业务逻辑需要保留 0 或 false 等有效 falsy 值，则此方法不适用。

3.3 使用可选链和空值合并运算符

结合可选链操作符和空值合并运算符，代码可以更加简洁且具备防御性：

if (a.aa?.trim() === '') {
    // 处理逻辑
}

3.4 使用自定义函数

如果此类检查在多处代码中重复出现，建议将其封装为通用函数以提高复用性：

function isEmpty(value) {
    return value == null || value === '';
}
if (isEmpty(a.aa)) {
    // 处理逻辑
}

总结

具体选择哪种方式取决于实际需求和上下文。使用 ! 运算符最为简洁，但需确保不会误判其他 falsy 值。若需更严格的类型检查，使用 == 或自定义函数可能更为合适。

到此这篇关于JavaScript 中处理 null和 undefined情况分析的文章就介绍到这了,更多相关js处理null和underfined内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！