JavaScript中的现代运算符：?.、?? 和 ??=

在JavaScript中，?.、?? 和 ??= 是相对较新的运算符，分别用于可选链、空值合并和空值合并赋值。这些运算符提供了更加简洁和安全的方式来处理未定义（undefined）或空（null）的值。

JavaScript的发展一直在不断进步，近年来，ES6及后续版本引入了许多实用的新特性。其中，?.、?? 和 ??= 这三个运算符对于简化代码和增强代码的可读性尤为重要。

可选链运算符 (?.)

定义和用途

可选链运算符 ?. 允许你安全地访问对象的深层嵌套属性，而无需担心中间某个环节可能未定义（undefined）或为空（null）。

示例

const person = {
    name: "Alice",
    profile: {
        age: 25,
        address: {
            city: "New York"
        }
    }
};

// 传统的访问方式
const city = person.profile && person.profile.address && person.profile.address.city;

// 使用 ?. 运算符
const cityUsingOptionalChaining = person.profile?.address?.city;

在这个例子中，使用 ?. 可以避免在访问 city 属性之前对每个中间对象进行检查。

空值合并运算符 (??)

定义和用途

空值合并运算符 ?? 用于在左侧的表达式结果为 null 或 undefined 时，返回其右侧的表达式结果。

示例

const input = null;
const defaultValue = "Default";

// 传统的方式
const value = (input !== null && input !== undefined) ? input : defaultValue;

// 使用 ?? 运算符
const valueUsingNullishCoalescing = input ?? defaultValue;

在这个例子中，如果 input 为 null 或 undefined，valueUsingNullishCoalescing 将会是 "Default"。

空值合并赋值运算符 (??=)

定义和用途

空值合并赋值运算符 ??= 是 ?? 的扩展，它将对左侧的变量进行赋值，如果该变量原本的值为 null 或 undefined。

示例

let name;

// 传统的赋值方式
name = name || "Unknown";

// 使用 ??= 运算符
name ??= "Unknown";

在这个例子中，如果 name 最初是 undefined 或 null，那么它将被赋予 "Unknown"。

使用场景和注意事项

• 可选链（?.） 适用于你不确定对象是否完整定义的情况。它减少了代码的冗余并提高了安全性。
• 空值合并（??） 适合于设置默认值，特别是当你希望区分 false、0 或 ''（空字符串）与 null/undefined 的场景。
• 空值合并赋值（??=） 适合于需要对变量进行默认值赋值，而不覆盖其他假值（如 0、false、''）的情况。

这些运算符提供了更加现代和优雅的方式来处理JavaScript中常见的一些问题，使代码更加简洁和易于维护。本文概述了这三个运算符的基本用法和适用场景，希望可以帮助你更好地理解和使用它们。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）