JS 使用可选链操作符 (?.) 进行空值检查

使用可选链操作符 (?.) 进行空值检查

在 JavaScript 中，处理嵌套对象或数组时，经常会遇到空值检查的问题。传统的空值检查通常比较繁琐，容易导致代码冗长且难以阅读。ES2020 引入了可选链操作符 (?.)，极大地简化了这些检查过程

传统空值检

假设我们有一个嵌套的对象结构，想要访问 user.address.city，但不确定 user、address 或 city 是否存在。传统的空值检查方法如下：

let city = null;
if (user && user.address && user.address.city) {
  city = user.address.city;
}

// let city = user ? (user.address ? user.address.city : null) : null;

这些方法不仅冗长，而且容易出错.

使用可选链操作符 (?.)

可选链操作符 (?.) 提供了一种更简洁的方式来处理这些情况。它允许我们在访问对象属性之前检查对象是否存在，从而避免运行时错误。

基本用法

let city = user?.address?.city;

如果 user 或 address 为 null 或 undefined，整个表达式会短路并返回 undefined，而不会抛出错误。

示例

假设我们有以下对象结构：

const user = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "Wonderland"
  }
};

使用可选链操作符访问 city：

let city = user?.address?.city; // "Wonderland"
let country = user?.address?.country; // undefined

处理数组

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

let secondUserAge = users[1]?.age; // 30
let thirdUserAge = users[2]?.age; // undefined

结合函数调用

const obj = {
  method: function() {
    return "Hello";
  }
};

let result = obj?.method(); // "Hello"
let nonExistentResult = obj?.nonExistentMethod(); // undefined

优点

• 简洁性: 减少了代码量，提高了可读性。
• 安全性: 避免了因访问不存在的属性而导致的运行时错误。
• 灵活性: 可以方便地处理复杂的嵌套结构

总结

可选链操作符 (?.) 是 ES2020 引入的一个强大特性，它简化了空值检查的过程，提高了代码的安全性和可读性。在现代 JavaScript 开发中，合理使用可选链操作符可以显著减少潜在的错误，并使代码更加简洁优雅。

注意事项

可选链操作符只能用于访问属性或调用方法，不能用于赋值。 在某些旧版本的浏览器或环境中可能不支持，需要使用 Babel 等工具进行转译。