在前端开发中，有时会遇到需要将某个变量的值设置为默认值的情况。以前的做法是使用逻辑运算符 ||，但是这种方法存在一些不足之处，例如当变量的值为 false、0 或 '' 时，也会被认为是不存在的值，从而导致默认值被赋值给变量。为了解决这个问题，ES11 引入了一种新的操作符——nullish coalescing 操作符（??），本文将详细介绍如何使用这个操作符优化代码逻辑。
nullish coalescing 操作符的使用
nullish coalescing 操作符是一个二元运算符，它用于判断一个表达式是否为 null 或 undefined，如果是，则返回指定的默认值。示例代码如下：
----- --- - ---- -- ---------- -- --------- ----- --- - --------- -- ---------- -- --------- ----- --- - - -- ---------- -- - ----- --- - -- -- ---------- -- --
可以看到，?? 操作符的作用是如果左侧表达式的值为 null 或 undefined，则返回右侧指定的默认值，否则返回左侧表达式的值。这种行为与逻辑运算符 || 有所不同，|| 会将左侧表达式的值转换为布尔值，如果左侧表达式的值可以转换为 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