随着 JavaScript 语言的发展，新的功能和语言特性不断被加入到 ECMAScript 规范里。2021 年，ECMAScript 2021(简称 ES2021) 成为了新的官方规范。其中，空值合并操作符是新加入的一个重要功能，它在编写前端应用时可以帮助程序员更方便地处理代码中的空值检查。
了解空值合并操作符
在 JavaScript 中，我们经常需要对变量或表达式进行非空判断，以避免由于空值带来的异常或错误。以往的做法通常是使用三目运算符，例如：
--- ------- -- ------ --- --------- -- ----- --- ----- - ------ - ------ - ---- - ------ - ------------- -
虽然这种方式可以处理空值，但它有如下问题：
- 代码冗长并且不够易读；
- 如果有多个判空条件，那么代码的嵌套层数会增加；
- 无法判断变量是指定的 undefined 值，还是未定义的变量。
为了避免以上问题，ECMAScript 2021 新增了空值合并操作符（nullish coalescing operator），其语法为 “??”，例如：
--- ------ - ----- -- -------------
这种方式会自动判断 value 是否 undefined 或 null，如果是，则使用 defaultValue 代替，否则使用 value 的值。
空值合并操作符的使用
使用空值合并操作符需要注意以下几点：
1. 它只对 undefined 或 null 值起作用
例如：
--- --- - --- --- --- - --- -- ---------- -- --------- --- --- - --- -- ---------- -- --
在这里，如果 foo 为空字符串，则 foo || 'default' 的结果为 'default'，而 foo ?? 'default' 的结果为 ''。
2. 它的优先级要低于 || 和 && 运算符
这意味着，如果同时使用多个运算符，应该使用括号来明确操作的优先级。例如：
--- --- - ------ --- --- - --- --- ------ - --- -- --- -- ---------- -- -- --- ------- - ---- -- ---- -- ---------- -- ---------
3. 它不会将值转换为布尔值，因此可以合并非布尔值
例如：
--- --- - -- --- --- - --- --- --- - --- -- ---- ----------------- -- -
4. 可以使用可选链操作符来处理对象上的属性
如果属性值为 null 或 undefined，则返回默认值。例如：
----- ------ - - ----- ------ ---- ---- -- ----- ---- - ----------- -- ---------- ----- --- - ---------- -- --- ----------------- ----- -- --- --
常见错误
在使用空值合并操作符时，也需要注意以下几点：
1. 缺少空值合并操作符
--- ---- --- --- - --- -- ---------- -- --------- --- --- - --- -- ---------- -- ---------
这里，我们使用了三目运算符，在 bar 和 baz 中，结果相同。但是，如果 foo 是一个空字符串或数字 0，那么 foo || 'default' 的结果将不是我们所需要的。因此，应该使用 ?? 来处理默认值。
2. 多个操作符的先后顺序
--- --- - ----- --- ---- --- ---- --- ------ - --- -- --- -- --- -- ---------- -- ----
在这里，我们使用了与 || 运算符类似的优先级规则，但结果并不是我们所需的。所以，应该使用括号来明确操作的优先级：
--- --- - ----- --- ---- --- ---- --- ------ - ---- -- ---- -- ---- -- ----------- -- ---------
结论
空值合并操作符是 ECMAScript 2021 中非常有用的功能之一。与传统的三目运算符相比，它更简洁、易读，并且可以有效避免由于空值带来的异常或错误。在你的代码中，尽可能使用空值合并操作符，并避免常见的错误，以便让你的代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673452410bc820c582485d2a