在编写前端代码时，经常会遇到需要设置默认值的情况。此时我们通常会使用 || 运算符判断一个变量是否为空，然后给它一个默认值，例如：
--- --- - ----- --- --- - --- -- ---------- ----------------- -- --- -------
使用 || 运算符的问题在于，它在判断变量是否为空时，会将一些其它类型的数据（例如数字0和空字符串）也视为 falsy 值，这可能导致一些不该被覆盖的值也被设置了默认值，从而引发 bug。
好在 ECMAScript 2020 标准引入了一个新的操作符：nullish 合并操作符（??），用于解决这个问题。nullish 合并操作符只在左侧变量为 null 或 undefined 时，才会使用右侧的默认值。
以下是一个使用 nullish 合并操作符的示例：
--- --- - ----- --- --- - --- -- ---------- ----------------- -- --- -------
通过上述代码，我们可以看到若变量 foo 为空，则 bar 将被赋值为默认值 default。
除了与 null 或 undefined 进行比较，nullish 合并操作符也可以用于数组和对象。例如：
----- --- - - ---- ---- -- ----- - - ------- -- ------ --------------- -- --- --- ----- --- - ------ ---------- -- --- ------- ----- - - ------ -- ---------- --------------- -- --- -
需要注意的是，在使用 nullish 合并操作符时，应确保目标环境已支持该操作符，否则代码可能无法正确运行。一种简单的解决方案是使用 Babel 等工具将 ES2020 的代码转换为 ES5 进行部署。
综上，nullish 合并操作符是一种简便且安全的变量初始化方式，能够有效避免一些潜在的 bug。
总结
- ECMAScript 2020 引入了 nullish 合并操作符，用于解决使用 || 运算符判断变量是否为空时的一些问题。
- 使用 nullish 合并操作符可以在一定程度上避免影响逻辑的默认值设置错误。
- 需要注意在目标环境已支持 nullish 合并操作符之后再使用该操作符。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6583a7fdd2f5e1655de7f075