ES11 享用优雅的 Nullish 合并运算符并避免它可能带来的副作用
随着ES11的正式发布，我们看到了一项非常实用的新特性 - Nullish 合并运算符。它可以帮助我们更好地处理变量可能为 null 或 undefined 时的值，而避免一些不必要的代码重复和副作用。本文将详细介绍这个新特性的相关知识，并带您一起来探究 Nullish 合并运算符的各种使用场景和注意事项。
一、Nullish 合并运算符的基本概念
Nullish 合并运算符是一个新的逻辑运算符，也就是 ??。它的用途是在运算过程中检查左侧的操作数是否为 null 或 undefined，若为 null 或 undefined，则返回右侧操作数的值，否则返回左侧操作数的值。
这个描述可能有点抽象，那么我们来看一个例子：
const foo = null ?? 'bar'; console.log(foo); // 输出 "bar"
在这个例子中，左侧操作数为 null，右侧操作数为 'bar'，那么根据 Nullish 合并运算符的规则，它会直接返回右侧操作数 'bar'，输出结果就是 'bar'。
那么同样是上述例子，如果我们用 || 运算符来实现，则会得到完全不同的结果：
const foo = null || 'bar'; console.log(foo); // 输出 "bar"
在这种情况下，|| 运算符会忽略左侧的 null 以及 undefined，直接返回右侧的 'bar'。这种情况下可能会导致一些副作用和错误，而 Nullish 合并运算符则不会出现这样的问题。
二、Nullish 合并运算符的多层使用
在某些情况下，我们可能需要在多层对象的属性链中使用 Nullish 合并运算符。这种情况下，要注意每一层的判断，而不能遗漏任何一层，否则可能引发错误。例如：
const foo = { bar: { baz: 'value' } }; const result = foo?.bar?.baz ?? 'default'; console.log(result); // 输出 "value"
这个例子中，我们使用了两个 Nullish 合并运算符，以在多层对象属性链中获取最终的值。在这种情况下，每层我们都需要在使用 Nullish 合并运算符之前，明确判断对象是否存在，避免代码出现错误。
三、Nullish 合并运算符和 Optional chaining 的组合使用
我们在使用 Nullish 合并运算符的时候，还可以将其和 Optional chaining 进行组合使用，进一步简化代码。例如：
const user = { name: '张三' }; const result = user?.address?.city ?? '未知'; console.log(result); // 输出 "未知"
这个例子中，我们使用了 Optional chaining 来判断 user 对象中是否存在 address 属性，如果不存在则不继续执行，否则执行 Nullish 合并运算符进行取值。这样即使 address 属性不存在也不会报错，避免代码出现错误。
四、Nullish 合并运算符的注意事项
在使用 Nullish 合并运算符的时候，注意以下几个问题：
当左侧操作数的值为 false 或者 0 的时候，Nullish 合并运算符也会返回右侧操作数值。因此在使用 Nullish 合并运算符的时候，建议将左侧操作数的布尔值转为真正的 null 或 undefined，避免出现错误。
在使用多层 Nullish 合并运算符的时候，要确保每一层使用 Optional chaining 检查对象是否存在，避免遗漏。否则会出现未定义的错误，导致代码无法执行。
在使用 Nullish 合并运算符的时候，建议将它们加上括号以避免优先级的问题，同时增加代码的可读性。
五、结语
Nullish 合并运算符是一项非常实用的新特性，在处理变量可能为 null 或 undefined 时非常方便。不过，在使用它的时候也要注意一些细节，避免出现副作用和错误。希望本文能够对您深入了解 Nullish 合并运算符有所帮助，同时增加您前端开发的技术积累和提升。最后，为了更好的效果，还请在实践和实验中去体验其中的奥妙。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67831c5a935627c90029e590
