返回

玩转JS：妙用?.、??、??=，给你的代码加点料！

前端

JavaScript 中的 ?.、??、??= 运算符：提升数据访问与赋值的利器

在 JavaScript 的浩瀚世界中，数据访问和赋值是前端开发中不可或缺的基石。然而，在处理可能为 null 或 undefined 的数据时，我们经常会陷入繁琐的 if 语句或三元运算符的泥沼之中。但是，这一切都随着 ?.、??、??= 三个运算符的横空出世而发生了天翻地覆的变化。这三个运算符不仅简洁优雅，而且极具实用性，是每一位 JavaScript 开发者的必备技能。

?.（可选链）运算符：优雅访问可能为 null 的数据

想象一下，你正在处理一个用户对象，其中包含嵌套的地址信息。传统上，你可能需要使用冗长的 if 语句来检查每个属性是否存在，然后再访问它，例如：

if (user && user.address && user.address.city) {
  console.log(user.address.city);
}

有了 ?. 运算符，这种繁琐的操作便迎刃而解：

console.log(user?.address?.city);

它将优雅地访问嵌套属性，如果任何属性为 null 或 undefined，则返回 undefined，而不会抛出错误。

??（空值合并）运算符：为 null 或 undefined 提供备胎

当你想给一个变量分配一个值，但又担心它可能为 null 或 undefined 时，?? 运算符便闪亮登场。它将合并两个表达式，如果第一个表达式不为 null 或 undefined，则返回第一个表达式；否则，返回第二个表达式，例如：

const defaultName = 'John';
const name = user?.name ?? defaultName;

无论 user.name 是否存在或为 null，name 变量都会被赋值为 'John'。

??=（空值赋值）运算符：给 null 或 undefined 赋值的救星

当你想确保一个变量在使用前已被赋值时，??= 运算符便是你的不二之选。它将给变量赋值，前提是变量的值为 null 或 undefined。否则，变量的值保持不变，例如：

let age;
age ??= 30;
console.log(age); // 输出：30

实战应用场景

数据访问：摆脱 null 和 undefined 的困扰

?. 运算符让你可以轻松访问可能为 null 或 undefined 的数据，无需担心错误，让你的代码更加健壮。

函数参数：提供优雅的默认值

使用 ?? 运算符为函数参数提供默认值，避免繁琐的 if 语句，让你的代码更具可读性。

变量初始化：确保变量已赋值

??= 运算符可以确保变量在使用前已被赋值，防止因使用未初始化的变量而导致的错误。

条件渲染：基于条件显示或隐藏元素

在 React 等框架中，?? 运算符可用于基于条件渲染组件或元素，让你的 UI 更加动态和交互。

类型检查：识别变量的类型

?? 运算符还可以与 typeof 运算符结合使用，检查变量的类型，让你对数据的类型有更清晰的了解。

总结

?.、??、??= 三个运算符为 JavaScript 开发人员提供了处理数据访问和赋值的强大工具。它们不仅简洁优雅，而且极具实用性，可以极大地提高代码的可读性、健壮性和可维护性。熟练掌握这三个运算符，将让你在 JavaScript 开发的道路上更上一层楼。

常见问题解答

  1. ?.、??、??= 运算符是否兼容所有浏览器？
    答：?.、??、??= 运算符在现代浏览器中均得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge。对于不支持的浏览器，可以使用 Babel 等转译器将其转译为低版本 JavaScript。

  2. 这三个运算符是否会降低代码性能？
    答：一般情况下，这三个运算符对代码性能的影响可以忽略不计。然而，在处理大量数据或进行复杂计算时，建议进行性能测试，以确保它们不会成为瓶颈。

  3. 这三个运算符是否可以一起使用？
    答：是的，这三个运算符可以组合使用，但需要考虑它们的执行顺序。例如，?? 运算符的优先级高于 ??= 运算符，而 ??= 运算符的优先级高于 ?. 运算符。

  4. 使用这三个运算符时需要注意什么？
    答：使用这三个运算符时，需要注意以下几点：

    • 确保要访问的属性或元素存在，否则可能会导致 undefined。
    • 明确理解运算符的执行顺序，以避免意外结果。
    • 在适当的情况下使用这三个运算符，避免滥用。

  5. 这三个运算符与传统的 if 语句和三元运算符相比有何优势？
    答：与传统的 if 语句和三元运算符相比，这三个运算符具有以下优势：

    • 更加简洁优雅，减少代码冗余。
    • 提高可读性，让代码更易于理解和维护。
    • 避免错误，让代码更加健壮。