ES10 中的 optional chaining 和 nullish coalescing 运算符

在 JavaScript 中,我们常常需要进行连锁判断,以确保某个属性或方法是否存在,否则就会出现代码中断的情况。ES10 中新增的 optional chaining 和 nullish coalescing 运算符,可以有效地解决这个问题。

Optional Chaining 运算符

Optional Chaining 运算符(?.)是一种简化连锁判断的语法糖,它可以在访问对象的属性或方法时,避免出现 undefined 或 null 的情况。

以前,我们可能会写出这样的代码:

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

现在,我们可以使用 Optional Chaining 运算符简化代码:

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

如果 obj、prop1、prop2 或 method 中的任何一个不存在,Optional Chaining 运算符都会返回 undefined,不会中断代码的执行。

Nullish Coalescing 运算符

Nullish Coalescing 运算符(??)是一种用于判断变量是否为 null 或 undefined 的运算符,它可以在变量为 null 或 undefined 时,返回默认值。

以前,我们可能会写出这样的代码:

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

现在,我们可以使用 Nullish Coalescing 运算符简化代码:

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

如果 input 为 null 或 undefined,Nullish Coalescing 运算符会返回 'default',否则会返回 input。

示例代码

下面是一个使用 Optional Chaining 和 Nullish Coalescing 运算符的示例代码:

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

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

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

在这个示例中,我们使用 Optional Chaining 运算符避免了访问不存在的属性,使用 Nullish Coalescing 运算符设置了默认值,使代码更加简洁和可读。

总结

Optional Chaining 和 Nullish Coalescing 运算符是 ES10 中新增的两个语法糖,它们可以有效地解决 JavaScript 中连锁判断的问题,使代码更加简洁和可读。在编写 JavaScript 代码时,我们应该积极使用它们,以提高代码的质量和效率。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65dfccc51886fbafa4cf89bf