巧用ES2020可选链操作符和空值合并操作符，告别null和undefined陷阱

2023-12-30 10:23:21

揭秘可选链操作符(?. )：优雅访问嵌套对象属性
在JavaScript中，使用点(.)运算符访问对象属性是很常见的操作。然而，当您尝试访问可能为null或undefined的嵌套对象属性时，就会遇到令人头疼的null和undefined错误。为了解决这一难题，ES2020引入了可选链操作符(?. )，它允许您以一种安全、优雅的方式访问嵌套对象属性。

语法：

object?.property

示例：

const user = {
  name: 'John',
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

// 使用可选链操作符安全访问嵌套属性
const userState = user?.address?.state;

// 如果user.address或user.address.state为null或undefined，则userState的值为undefined，不会报错
console.log(userState); // 'CA'

在上面的示例中，如果user.address或user.address.state为null或undefined，userState的值将为undefined，而不是引发错误。这使得您可以放心地访问嵌套对象属性，而无需担心null或undefined带来的麻烦。

空值合并操作符(??) ：赋予默认值的新选择

除了可选链操作符，ES2020还引入了空值合并操作符(??)，它允许您为变量或表达式指定一个默认值。语法：

variable ?? default_value

示例：

const name = user?.name ?? 'Guest';

// 如果user.name为null或undefined，则name的值为'Guest'
console.log(name); // 'John'

在上面的示例中，如果user.name为null或undefined，name的值将被设置为'Guest'。这为您提供了另一种处理null和undefined值的方式，使其更加灵活和可控。

实战演练：巧妙运用可选链操作符和空值合并操作符

安全访问对象属性
使用可选链操作符，您可以安全地访问嵌套对象属性，而无需担心null和undefined错误。这使得您的代码更加健壮，避免了不必要的错误处理。
设置默认值
使用空值合并操作符，您可以为变量或表达式指定一个默认值。这使您的代码更加灵活，避免了冗长的if-else语句或三元运算符。
简化条件判断
可选链操作符和空值合并操作符可以帮助您简化条件判断。例如，您可以使用可选链操作符来检查变量是否为null或undefined，而无需使用if-else语句。
提高代码可读性
可选链操作符和空值合并操作符可以提高代码的可读性。通过使用这些操作符，您的代码更加简洁和易于理解。