了解截断运算符(Nullish Coalescing Operator)如何在 ES9 中工作

随着 JavaScript 语言的不断发展,新的语法和特性不断涌现,其中截断运算符(Nullish Coalescing Operator)是 ES9 中新增的一个运算符,它的作用是在变量为 null 或 undefined 时返回默认值。本文将详细介绍截断运算符的使用方法、注意事项以及示例代码,帮助读者更好地理解和掌握这个实用的运算符。

什么是截断运算符

截断运算符(Nullish Coalescing Operator)是 ES9 中新增的一个运算符,用来判断一个变量是否为 null 或 undefined,如果是,则返回默认值,否则返回该变量的值。截断运算符的语法如下:

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

其中,variable 表示要判断的变量,defaultValue 表示默认值。如果 variable 的值为 null 或 undefined,则返回 defaultValue,否则返回 variable 的值。

截断运算符的优点

截断运算符的优点在于它更加精确地判断变量是否为 null 或 undefined。在 JavaScript 中,null 和 undefined 都表示变量没有值,但它们的含义略有不同。null 表示变量被明确地赋值为 null,而 undefined 表示变量没有被赋值,或者被赋值为 undefined。在某些情况下,需要精确地判断变量是否为 null 或 undefined,这时就可以使用截断运算符。

截断运算符的注意事项

在使用截断运算符时,需要注意以下几点:

  1. 截断运算符只能用于判断变量是否为 null 或 undefined,不能用于判断其他 falsy 值,比如 false、0、'' 等。
  2. 如果 defaultValue 是一个表达式,那么它只会在 variable 的值为 null 或 undefined 时才会被执行,否则不会执行。
  3. 如果 defaultValue 是一个函数,那么它会在 variable 的值为 null 或 undefined 时被调用,并将其返回值作为截断运算符的结果。

截断运算符的示例代码

下面是一些使用截断运算符的示例代码,帮助读者更好地理解和掌握这个实用的运算符。

示例1:返回默认值

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

上述代码中,变量 x 未被赋值,因此它的值为 undefined。使用截断运算符判断 x 的值是否为 null 或 undefined,发现是,于是返回默认值 'default'。

示例2:返回变量值

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

上述代码中,变量 x 被赋值为 0,虽然 0 在 JavaScript 中是 falsy 值,但它不等于 null 或 undefined,因此不会使用截断运算符的默认值。

示例3:返回表达式的值

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

上述代码中,变量 x 未被赋值,因此它的值为 undefined。使用截断运算符判断 x 的值是否为 null 或 undefined,发现是,于是执行表达式 x = 'default',将 x 的值赋为默认值,并返回该值。

示例4:返回函数的返回值

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

上述代码中,变量 x 未被赋值,因此它的值为 undefined。使用截断运算符判断 x 的值是否为 null 或 undefined,发现是,于是调用 getDefault 函数,并将其返回值作为截断运算符的结果。

总结

截断运算符是 ES9 中新增的一个运算符,用来判断一个变量是否为 null 或 undefined,如果是,则返回默认值,否则返回该变量的值。截断运算符更加精确地判断变量是否为 null 或 undefined,适用于某些特定的场景。在使用截断运算符时,需要注意它的语法和注意事项,并根据实际情况选择合适的方式来使用。

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