应当注意！ES11 中新增的空值合并运算符使用时的注意事项
在 ES2020 中，新增了一个空值合并运算符（??），该运算符可以用于处理空值的情况。当该运算符在表达式中使用时，如果左侧的操作数为 null 或 undefined，则返回右侧的操作数，否则返回左侧的操作数。这是一个非常实用的运算符，但在使用时需要注意以下几点。
- 配合可选链操作符使用才具效益
空值合并运算符与可选链操作符一起使用时，可以进一步简化代码，并避免“Cannot read property 'xxx' of null/undefined”错误的发生。因此，在实际开发中，尽管可以光使用空值合并运算符，但建议在使用前先判断该值是否存在，并配合可选链操作符使用，以更好地实现代码的健壮性。
示例代码：
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- ----- ------- --------- -- -------------------- -- ------- -- -------- ------------------- -- -------- -- --------- ---------------------- -- -------- -- --------- ------------------------------------- -- -------- -- ---------
在上述示例代码中，我们使用了空值合并运算符，并结合可选链操作符使用。当访问obj.gender时，由于该值为 undefined，因此使用可选链操作符调用toUpperCase()方法不会报错，并且在运算符右侧的值不为 null 或 undefined 时，不会产生任何效果。
- 不要滥用空值合并运算符
虽然空值合并运算符可以处理 null 或 undefined，但在使用时应避免过度依赖该运算符，而是通过代码设计尽可能避免空值的产生。如果忽略了空值的处理，可能会导致意想不到的后果，例如出现难以追踪的错误或安全漏洞等。
示例代码：
const arr1 = null; const arr2 = [1, 2, 3]; const arr = arr1 ?? arr2; console.log(arr); // 输出：[1, 2, 3]
在上述示例代码中，由于 arr1 为 null，arr2 为一个数组，因此最终的结果为 arr2。如果我们在编码时，考虑到可能存在空值的情况，而编写了相应的处理代码，则可以避免这样的问题。
- 空值合并运算符不能用于逻辑运算符
空值合并运算符只能用于处理 null 或 undefined，在逻辑运算符（如 && 或 ||）中使用时会产生错误，因为该运算符返回的并非一个布尔值。而在逻辑运算符中使用空值合并运算符时，常见的错误包括代码无法编译或代码逻辑出错等，因此在使用时需要注意。
示例代码：
const a = null; const b = false; const c = undefined; console.log(a && b ?? c); // 报错：SyntaxError: Unexpected token '??' console.log(a || b ?? c); // 报错：SyntaxError: Unexpected token '??'
在上述示例代码中，我们尝试在逻辑运算符中使用空值合并运算符，但在控制台中会提示错误信息。因此，在实际开发中，尽管空值合并运算符可以带来便利，但也需要小心使用，以避免产生错误或逻辑问题。
总结：
在实际开发中，空值合并运算符是一种非常实用的运算符，但在使用时需要遵循一定的规范和注意事项。尤其需要注意的是，配合可选链操作符使用可以更好地避免产生“Cannot read property 'xxx' of null/undefined”错误，同时也需要避免滥用该运算符，以实现代码的实用性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1273383d39b48815831d0