ES2020让代码更优美的运算符 (?.) (??)

ES2020（也称为ES11）引入了两个新的运算符，即可选链运算符（?.）和空值合并运算符（??），以使JavaScript代码更加简洁、简单和易于维护。

可选链运算符（?.）

可选链运算符（?.）可用于在不确定对象是否存在的情况下，可以访问对象或其属性的属性。这是一个非常实用的特性，因为它可以帮助我们避免在访问对象的属性时引发"TypeError"错误，同时也可以保持代码的简洁性。

使用可选链运算符访问嵌套属性

在访问嵌套属性时，可选链运算符非常有用。例如：

const person = {
  name: 'Alice',
  address: {
    city: 'Beijing'
  }
};

const cityName = person.address?.city; // 'Beijing'
const zipCode = person.address?.zipCode; // undefined

在上面的示例中，我们使用可选链运算符（?.）来访问"person"对象中的嵌套属性"address.city"。如果"address"对象不存在，则返回undefined。同样，我们使用可选链运算符访问属性"address.zipCode"也将返回undefined。

使用可选链运算符调用函数

可选链运算符还可以很方便地用于调用可能不存在的方法。例如：

const person = {
  name: 'Alice',
  getAddress() {
    return this.address;
  }
};

const zipCode = person.getAddress()?.zipCode; // undefined

在上面的示例中，我们使用可选链运算符（?.）来调用可能不存在的"getAddress"函数。如果"getAddress"函数存在并返回一个对象，则我们可以访问该对象的属性"zipCode"。否则，将返回undefined。

空值合并运算符（??）

空值合并运算符（??）可用于在变量可能为null或undefined的情况下提供默认值。它可以用于任何类型的值，包括对象、数组和函数。它的作用是检查变量是否为null或undefined，并在不是null或undefined的情况下返回该变量的值。如果变量是null或undefined，则返回默认值。

使用空值合并运算符提供默认值

让我们看看一个具体的示例：

const name = null ?? 'Unknown'; // 'Unknown'

在上面的示例中，"name"的值是null，但是我们使用空值合并运算符（??）提供了一个默认值"Unknown"。因此，"name"的值将是"Unknown"。

使用空值合并运算符提供默认函数

空值合并运算符还可以用于提供默认函数，以便在变量为null或undefined的情况下调用该函数并返回其结果。例如：

function getDefaultName() {
  console.log('Calling getDefaultName');
  return 'Unknown';
}

const name = null ?? getDefaultName(); // Calling getDefaultName
                                      // 'Unknown'

在上面的示例中，"name"的值是null，我们使用空值合并运算符（??）提供了一个默认函数"getDefaultName"。因此，"getDefaultName"将被调用，并返回"Unknown"。这就是为什么我们可以看到"Calling getDefaultName"打印到控制台的原因。

总之，可选链运算符（?.）和空值合并运算符（??）是非常实用的新特性，它们可以帮助我们更轻松地编写简单而且易于维护的JavaScript代码。