ES12 之后的变化：可选的链式调用操作符 (Optional Chaining) 和 Nullish 合并操作符 (Nullish Coalescing Operator)

介绍

ES12 引入了两个新的操作符，可选的链式调用操作符 (Optional Chaining) 和 Nullish 合并操作符 (Nullish Coalescing Operator)。这两个操作符提供了更好的语法和代码可读性，尤其是当我们处理有可能为空的数据结构时。

在本文中，我们将深入了解这两个新的操作符，并在 JavaScript 中进行示例。

可选的链式调用操作符 (Optional Chaining)

可选的链式调用操作符是一种新的语法，用于安全地访问 JavaScript 对象的属性或方法，避免因对象为空而导致的错误。如果属性或方法不存在，则返回 undefined，而不是抛出异常。

语法

const result = object?.property?.method();

示例

下面是一个常规的 JavaScript 对象：

const user = {
  id: 1,
  name: 'John',
  address: {
    city: 'New York',
    zipcode: '10001'
  }
};

我们可以通过点语法访问嵌套的属性或方法：

const city = user.address.city; // 'New York'

但是，如果 address 字段为空，则我们将面临一个错误：

const city = user.address.city; // TypeError: Cannot read property 'city' of undefined

现在，我们可以通过可选的链式调用操作符来避免这个错误：

const city = user.address?.city; // undefined

在此示例中，如果 address 字段为空，则直接返回 undefined，而不是抛出异常。

Nullish 合并操作符 (Nullish Coalescing Operator)

Nullish 合并操作符是一种新的语法，用于选择默认值，但只选择 null 或 undefined。与常规的合并操作符 (||) 不同，Nullish 合并操作符仅当左侧操作数为 null 或 undefined 时才返回默认值。

语法

const result = object ?? 'default';

示例

假设我们要选择一个名称，如果没有可用的名称，则选择默认名称：

const name = '';
const result = name || 'default'; // 'default'

然而，如果名称为 null 或 undefined，则我们意外地选择了默认名称：

const name = null;
const result = name || 'default'; // 'default'

这时，我们可以使用 Nullish 合并操作符来避免这种情况：

const name = null;
const result = name ?? 'default'; // 'default'

在此示例中，只有当 name 为 null 或 undefined 时，才会选择默认名称。

总结

在 ES12 中，引入了新的操作符，可选的链式调用操作符和 Nullish 合并操作符。这两个操作符提供了更好的语法和代码可读性，特别是在处理有可能为空的数据结构时。我们可以在 JavaScript 中使用这些新的操作符，编写更安全、更简洁的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a241c348841e9894e96a1e