使用 ES11 的 nullish coalescing 操作符优化代码逻辑

阅读时长 3 分钟读完

在前端开发中,有时会遇到需要将某个变量的值设置为默认值的情况。以前的做法是使用逻辑运算符 ||,但是这种方法存在一些不足之处,例如当变量的值为 false0'' 时,也会被认为是不存在的值,从而导致默认值被赋值给变量。为了解决这个问题,ES11 引入了一种新的操作符——nullish coalescing 操作符(??),本文将详细介绍如何使用这个操作符优化代码逻辑。

nullish coalescing 操作符的使用

nullish coalescing 操作符是一个二元运算符,它用于判断一个表达式是否为 null 或 undefined,如果是,则返回指定的默认值。示例代码如下:

可以看到,?? 操作符的作用是如果左侧表达式的值为 nullundefined,则返回右侧指定的默认值,否则返回左侧表达式的值。这种行为与逻辑运算符 || 有所不同,|| 会将左侧表达式的值转换为布尔值,如果左侧表达式的值可以转换为 false 的值,则返回右侧的默认值。

使用 nullish coalescing 操作符优化代码逻辑

使用 nullish coalescing 操作符可以使代码更加简洁、易读,避免因为一些隐式的类型转换带来的不必要的错误。下面将通过示例代码来演示如何使用 nullish coalescing 操作符优化代码逻辑。

示例一

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

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

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

在传统的写法中,当 y 的值为 '' 时,y 的值会被转化为 false,从而导致默认值被赋值给 y,而在 ES11 中,使用 nullish coalescing 操作符可以避免这个问题。

示例二

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

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

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

在传统的写法中,需要手动判断 y 的值是否为 undefined,并且这种写法也存在一些不足之处,例如 y 的值为 null 时,这个判断就会失效。而在 ES11 中,使用 nullish coalescing 操作符则可以处理所有的情况。

结论

使用 nullish coalescing 操作符可以避免一些隐式类型转换的问题,使代码更加简洁、易读、易于维护。但是需要注意,这个操作符只能处理 null 或 undefined,如果需要判断一个变量是否存在,还需要使用传统的技巧。同时,也需要注意 ES11 的兼容性问题,因为并不是所有的浏览器都支持 nullish coalescing 操作符。

在实际开发中,我们应该根据具体情况选择适合的写法,尽可能避免代码的隐式类型转换,从而减少代码的错误率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/671c45e79babaf620faff7aa

纠错
反馈