ECMAScript 2021（也称为ES12）已经发布，其中包含了许多新的功能和语法功能。这篇文章将介绍其中一个新的语法特性，即Optional Chaining（可选链）语法，它可以使我们在代码中更安全、更容易地访问嵌套的对象。
Optional Chaining的概念
在JavaScript中，当我们想要访问一个深层次的嵌套对象的属性时，通常需要使用多个点操作符（.）来访问每一个属性。例如：
const person = { name: { first: 'John', last: 'Doe' } }; const firstName = person.name.first; // 'John'
这很好用，但是如果我们在中间使用小写字母的变量，可能会出现意外错误：
const person = { name: { first: 'John', last: 'Doe' } }; const firstName = person.nam.first; // TypeError: Cannot read property 'first' of undefined
在这种情况下，虽然我们的代码是合法的，但是它会在运行时抛出一个错误。Optional Chaining语法就是为了解决这种问题而引入的。
Optional Chaining的语法
Optional Chaining语法使我们可以避免在访问深层嵌套对象时出错。通过使用问号（?）操作符，我们可以在属性或值为undefined或null时跳过对应的访问。例如：
-- -------------------- ---- ------- ----- ------ - - ----- - ------ ------- ----- ----- - -- ----- --------- - ------------------- -- ------ ----- ---------- - -------------------- -- ---------展开代码
上面的代码中，我们使用了?.操作符来获取person.name对象的first属性。如果name属性为undefined或null，则Javascript引擎会自动忽略这个访问，并返回undefined。
当然，我们可以根据需要使用任意数量的?.操作符来访问多层深度的嵌套属性：
-- -------------------- ---- ------- ----- ------ - - ----- - ------ ------- ----- ----- -- -------- - ------- - ----- ------ ------- --- -- ----- ---- ----- - -- ----- ------------ - ------------------------------ -- --- ----- ------- - ----------------------------------- -- ---------展开代码
在这个例子中，我们使用了两个?.操作符。第一个用来避免访问一个不存在的属性，第二个用于访问一个不存在的对象。Javascript引擎会自动忽略掉整个操作，返回undefined。
Optional Chaining的用途
使用Optional Chaining语法可以避免访问不存在的属性时抛出的错误。这个特性在访问嵌套的对象时极为有用，可以在代码中提高安全性和可读性。
另外，Optional Chaining的特性可以用来简化一些代码：
-- -------------------- ---- ------- ----- ---- - - ----- -------- ---- --- -------- - -------- -------- - -- ----- ------- - ------------ -- --------------------- -- -------- ----- ----------------- - ---------------------- -- --------展开代码
在这个例子中，我们使用了之前的方式访问用户对象的地址信息（user.address && user.address.country），而在新的语法下，我们可以使用更简洁的方式实现相同的功能（user.address?.country）。
Optional Chaining的兼容性
尽管Optional Chaining的语法相对于传统的属性访问语法更加安全和简洁，但是它并不是在所有的Javascript引擎和浏览器都可以使用的。你需要确保你的代码可以在支持这个特性的环境下正常运行。
目前（截至2021年6月），Optional Chaining已经被所有主流浏览器和Node.js支持，但是在一些旧的环境中可能仍然存在兼容性问题。你可以使用Babel等工具将你的代码转换成更广泛的兼容格式。
示例代码
以下是一个使用Optional Chaining的示例代码，它提供了一个SafeGet函数，用于从给定的对象中获取属性，并在访问不存在的属性时返回一个默认值：
-- -------------------- ---- ------- -------- ------------ ----- ------------- - ------ ------------------------------------ ----- - ------ ----------- -- ------------- -- ----- - ----- ---- - - ----- -------- ---- --- -------- - -------- -------- - -- ----- ---- - ------------- ------- ----------- -- ------- ----- ---- - ------------- --------------- ----------- -- ---------展开代码
在这个例子中，我们使用了?.操作符和逻辑nullish合并（??）操作符来实现SafeGet函数。如果我们访问一个不存在的属性或对象，它会返回一个默认值。这个函数可以用于更加安全地访问嵌套的对象，并避免出现TypeError或ReferenceError等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d69f0fa941bf7134c67c0a
