随着 JavaScript 近年来在前端开发场景中的广泛应用，越来越多的 JavaScript 新语法不断被引入，以便开发人员更高效地编写代码。在 ES11 中引入的新语法——可选链操作符（?.）与空值合并操作符（??），为开发人员提供了更好的方式处理空值和简化代码。这篇文章将详细介绍这两个新的 JavaScript 语法，其深度、学习和指导意义。
可选链操作符（?.）
当我们访问对象的属性时，如果该属性不存在，就会返回 undefined。这种情况下，如果我们想要访问嵌套对象属性，就必须手动检查每一个嵌套的属性是否存在，以免因未定义而导致 TypeError 错误。这种检查可以通过 if 语句、三元运算符和 && 运算符等来实现，但是需要编写更多的代码，使得代码变得复杂。
在新的语法中，可选链操作符（?.）就提供了一种简便的方式来访问嵌套对象属性。它可以有效地处理对象属性不存在的情况，使得代码更加简单、易读、易于维护。
先来看一个传统的嵌套对象属性访问代码：
const user = { name: 'John', address: { city: 'New York' } };
const city = user.address ? user.address.city : undefined;这里我们通过使用问号和点（? .）来处理 user 对象中 address 属性的存在性。当 address 属性存在时，才能访问到 city 属性。如果我们想要访问更深层次的对象属性，那就得加上更多的问号和点号。
看一下使用可选链操作符（?.）重写的代码：
const user = { name: 'John', address: { city: 'New York' } };
const city = user.address?.city;可以看到，使用可选链操作符（?.）可以大大减少对于属性的存在性的判断。此外，可选链操作符（?.）也可以用来访问数组的元素，如：
const arr = [1, 2, 3]; const fourth = arr[3]?.prop;
上面这段代码可以有效地避免了访问 undefined/null 值的问题。
空值合并操作符（??）
在 JavaScript 中，当我们需要检查变量是否存在以及它的值是否为 null、undefined 或者空字符串时，通常会用条件运算符（?:）来写出一些冗长的代码。这不仅会使代码变得不易读，还会增加不必要的代码行数。在新的 JavaScript 语法中，空值合并操作符（??）就被添加进来了。
使用空值合并操作符（??）可以更加简单地检查变量是否存在，如果变量不存在或者值为 null、undefined 或空字符串，就可以用默认值来代替。使用这个操作符时，左侧行表达式的值如果为 null 或者 undefined，那么就会取右侧的值，否则就会取左侧行表达式的值。如下代码：
const address = user.address ?? 'Unknown';
在上面的例子中，?? 操作符用来替代 || 操作符。如果 user.address 的值为 null、undefined 或者空字符串，就会返回 'Unknown'。
需要注意的是，?? 操作符只会在左侧值为 null 或 undefined 时才会返回右侧的值。如果左侧值是 false、0 或 ””，则并不会触发空值合并操作，这和 || 操作符有所不同。如下代码：
const name = ''; const result = name ?? 'Unknown'; // result 为 '' const result2 = name || 'Unknown'; // result2 为 'Unknown'
示例代码
最后，为了更好地理解可选链操作符（?.）和空值合并操作符（??），这里提供一些示例代码：
-- -------------------- ---- ------- -- -------------------- ----- ---- - - ----- ------- -------- - ----- ---- ----- - -- ----- ---- - ------------------- -- -- ---- - ----- --- - --- -- ----- --- ----- ----------- - --------------- -- ---- --- ------ -- -------------- ----- ---- - --- ----- ------ - ---- -- ---------- -- --------- ----- ------ - ---------- ----- ------ - ----- ----- ------ - --- ----- ------- - ------ -- ------ -- ------ -- ----------
总结
在本文中，我们详细介绍了可选链操作符（?.）和空值合并操作符（??）这两个 JavaScript 新语法的特点和用法。可选链操作符（?.）可以更加简便地处理嵌套对象属性的访问问题，而空值合并操作符（??）则可以更加轻松地处理变量默认值的赋值问题。尽管这两个新语法都不是必不可少的，但是它们的引入无疑使得代码更加整洁、可读、易于维护。我相信这两个语法对于前端开发人员一定会有好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc7e3cf6b2d6eab322d2a9