前言
JavaScript 是一门灵活的动态语言，但也因此存在许多潜在的陷阱。在开发中我们经常会使用一些语法糖来解决实际问题，比如 optional chaining 和 nullish 合并。这两个新特性都是由 ES11 引入的，它们使得代码变得更加简洁易读，同时也提高了代码的可靠性。但是，我们在使用 optional chaining 和 nullish 合并时，也需要注意潜在的问题。
本文将深入讲解 optional chaining 和 nullish 合并的使用，为读者提供更深入的了解和指导。
optional chaining
在 JavaScript 中，我们经常需要访问对象的属性和方法。但是，有些属性或方法是可选的，可能不存在。我们通常会使用 if 语句或三元运算符来检查属性或方法是否存在，这样做非常繁琐。
if (obj && obj.prop && obj.prop.method) {
obj.prop.method();
}在 ES11 中引入了 optional chaining 语法，它可以简化我们的代码。下面是一个简单的示例：
obj?.prop?.method();
这段代码等同于：
if (obj && obj.prop && obj.prop.method) {
obj.prop.method();
}nullish 合并
在 JavaScript 中，当变量的值为 null 或 undefined 时会引发错误。为了防止这种错误发生，我们经常需要对变量的值进行检查。
let foo = null; let bar = foo || 'default'; console.log(bar); // 'default'
在这个例子中，我们使用 || 运算符来设置默认值。如果 foo 的值为 null 或 undefined，则使用默认值 'default'。
但是，当变量的值为 false、0 或空字符串时，这种方法会产生问题。在这种情况下，bar 会等于默认值，而不是变量的实际值。
在 ES11 中引入了 nullish 合并运算符 ??，它可以避免这种问题的发生。
let foo = null; let bar = foo ?? 'default'; console.log(bar); // null
在这个例子中，bar 的值是 null，而不是默认值 'default'。
问题产生的原因
optional chaining 和 nullish 合并虽然是非常有用的特性，但它们也会引发一些问题，尤其是在将它们组合使用时。
let obj = {
a: undefined,
b: null
};
let value = obj?.a ?? obj?.b;
console.log(value); // null在这个例子中，value 的值是 null，而不是 undefined。这个问题是由 optional chaining 引起的，因为它会返回 undefined，然后被 ?? 运算符转换为 null。这很容易让人感到困惑，因为我们可能会期望 value 的值为 undefined。
解决问题的方法
为了避免 optional chaining 和 nullish 合并可能产生的问题，我们可以使用常规的条件语句来检查变量的值。
-- -------------------- ---- ------- --- ------ -- ---- -- ----- --- ---------- - ----- - ------ - ---- -- ---- -- ----- --- ---------- - ----- - ------ - ------------------- -- ---------
在这个示例中，我们使用 if 语句来检查 obj.a 和 obj.b 的值是否存在。如果存在，则将其值赋给变量 value。否则，value 的值为 undefined。
结论
在实际开发中，我们需要根据具体的情况来选择 optional chaining 和 nullish 合并这两种语法糖。在处理复杂的嵌套对象时，它们可以减少代码的复杂度，同时提高代码的可读性和可维护性。但是，在将它们组合使用时，我们需要小心问题的产生，不妨使用常规的检查方法来避免可能产生的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f66ebcc5c563ced585f10c