ES11 中的可选链操作符和 nullish 合并运算符解决 JavaScript 中的属性查询问题-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，我们经常需要对一个对象的属性进行查询，但是如果该属性不存在或者该对象为 null/undefined，则可能导致程序崩溃或者出现预期之外的结果。这时候，ES11 中推出的可选链操作符 ?. 和 nullish 合并运算符 ?? 就派上用场了。

可选链操作符

在 ES11 中，可选链操作符 ?. 可以用来判断访问一个对象的属性是否存在，如果存在则返回该属性的值，如果不存在则返回 undefined 。

-- -------------------- ---- -------
----- ---- - -
  ----- --------
  --------- -
    ------ -------------------
  -
-

----- ----- - --------------------
------------------ -- -------------------

----- ----- - --------------------
------------------ -- ---------

如果我们直接使用 user.contacts.phone，则会抛出错误。但是使用可选链操作符 user.contacts?.phone，则会返回 undefined，程序也不会崩溃。

此外，可选链操作符还可以进行深度查询：

-- -------------------- ---- -------
----- ---- - -
  ----- --------
  --------- -
    ------ -------------------
  -
-

----- --------- - --------------------------
---------------------- -- ---------

在这个例子中，因为 user.contacts.phone 不存在，所以 user.contacts?.phone?.type 返回 undefined。

nullish 合并运算符

在 ES11 中，nullish 合并运算符 ?? 可以用来判断一个值是否为 null 或者 undefined，如果是则返回指定的默认值，如果不是则返回该值本身。

const input = null
const value = input ?? 'default'
console.log(value) // 'default'

此时，value 的值为 'default'，因为 input 的值为 null。

但是，如果我们使用 || 运算符进行判断：

const input = null
const value = input || 'default'
console.log(value) // 'default'

此时的 value 值同样为 'default'，但是当我们查询一个空字符串或者数字 0 时，则会得到不同的结果：

const input = ''
const value1 = input || 'default'
console.log(value1) // 'default'

const value2 = input ?? 'default'
console.log(value2) // ''

当使用 || 运算符进行查询时，一个空字符串或者数字 0 会被认为是 false，所以返回了默认值。但是使用 nullish 合并运算符，则可以做到只有在值为 null 或者 undefined 时才返回默认值。

案例

在实际开发中，可选链操作符和 nullish 合并运算符经常被用来处理 API 返回的数据，以及 React 中的渲染过程。

例如，我们可以使用可选链操作符来获取 API 返回的数据：

const response = await fetch(...)
const data = await response.json()

const price = data?.product?.price ?? 0

这里使用了 nullish 合并运算符来设置默认值为 0，防止在没有获取到数据时导致程序崩溃。

在 React 中，我们可以使用可选链操作符来避免渲染一个不存在的属性：

-- -------------------- ---- -------
-------- ------------------ -
  ------ -
    -----
      ----------------------
      -------------------
      --------------------- -- -
        --- ------------------------------
      ---
    ------
  -
-

在这个例子中，我们使用了可选链操作符来判断 props.list 是否存在，如果存在则渲染一个列表，否则不会渲染。

结论

ES11 中推出的可选链操作符和 nullish 合并运算符为我们解决了 JavaScript 中的属性查询问题，提高了程序的健壮性。在实际开发中，我们可以灵活地运用这两个操作符，防止程序出现意料之外的错误。

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