【JS】问号点（?.）和双问号（??）的用法

JavaScript中的 ?. 和 ?? 操作符：提升代码健壮性和可读性

JavaScript作为一门动态语言，经常在访问对象属性或处理变量默认值时面临一些挑战。为了解决这些问题，ECMAScript 2020引入了可选链操作符（?.）和空值合并操作符（??）。这两个操作符不仅提高了代码的健壮性，还使代码更加简洁易读。

可选链操作符 ?.

可选链操作符允许我们在访问对象的属性或调用对象的方法时，更加安全地处理可能为null或undefined的中间属性。这样，我们就可以避免因为不存在的属性或方法而导致代码抛出错误。

考虑以下示例：

const user = {
  name: 'Alice',
  address: {
    city: 'New York',
  },
};

// 传统写法
const cityName = user.address ? user.address.city : undefined; // 'New York'

// 使用可选链操作符
const cityName = user.address?.city; // 'New York'
const streetName = user.address?.street; // undefined

通过使用可选链操作符，我们可以直接使用user.address?.city来访问city属性，而不需要事先检查user.address是否为null或undefined。如果user.address不存在，表达式将立即返回undefined，而不会引发错误。

空值合并操作符 ??

空值合并操作符允许我们从一系列可能的值中选择第一个定义的值。这对于处理可能为null或undefined的变量默认值特别有用。

示例：

const defaultValue = 'Default Value';

const value1 = null;
const value2 = undefined;
const value3 = 'Some Value';

// 使用空值合并操作符，选择第一个定义的值
const result1 = value1 ?? defaultValue; // 'Default Value'
const result2 = value2 ?? defaultValue; // 'Default Value'
const result3 = value3 ?? defaultValue; // 'Some Value'

在上述示例中，空值合并操作符会选择第一个非null且非undefined的值。如果所有值都是null或undefined，操作符将返回最后一个值。

结论

?.和??操作符是ECMAScript 2020引入的重要特性，它们帮助我们写出更加健壮、简洁和可读的代码。通过使用可选链操作符，我们可以更安全地访问对象属性和方法，而空值合并操作符则允许我们更优雅地处理默认值。

在编写JavaScript代码时，考虑到这两个操作符的用法，我们可以提高代码的质量，减少错误，让代码更具表达力和可维护性。