在开发前端应用时，我们经常需要从对象或数组中获取特定的属性或元素。在过去，我们通常使用条件语句或 try-catch 块来确保我们不会在访问不存在的属性或元素时出现错误。但是，ES2021 中引入了两个新的语言特性，即嵌套解构和可选链，可以使我们更轻松地处理这种情况。
嵌套解构
嵌套解构是一种将对象或数组中的多个属性或元素解构到单个变量中的方式。在 ES6 中，我们可以使用简单的解构语法来实现：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- -
----- ----------
-------- -------
-
--
----- - ----- ---- -------- - ----- ------- - - - -------
------------------ -- -------
----------------- -- --
------------------ -- ---------
--------------------- -- -------在这个例子中，我们将 person 对象中的 name、age、address.city 和 address.country 属性解构到单个变量中。如果某个属性不存在，解构语句会将该变量设置为 undefined。
但是，如果我们想要解构的属性是嵌套的，并且可能不存在，这种方法可能会导致错误。例如，如果我们想要解构 person 对象中的 address.zipcode 属性，但是 address 对象本身不存在，那么代码将会抛出一个错误：
const { address: { zipcode } } = person; // TypeError: Cannot destructure property 'zipcode' of 'undefined' as it is undefined.为了避免这种错误，我们可以使用可选链。
可选链
可选链是一种在访问对象或数组属性时，不会抛出错误的语言特性。在过去，我们通常使用条件语句来确保访问的属性存在：
if (person && person.address && person.address.city) {
console.log(person.address.city);
}但是，这种方法很繁琐，并且容易出错。ES2021 中引入了可选链，可以让我们更轻松地访问嵌套的属性。
console.log(person?.address?.city); // 'Beijing' console.log(person?.address?.zipcode); // undefined
在这个例子中，我们使用 ?. 运算符来访问 person 对象的 address 属性和 address 对象的 city 和 zipcode 属性。如果某个属性不存在，该表达式将返回 undefined 而不会抛出错误。
嵌套解构和可选链的结合使用
嵌套解构和可选链可以结合使用，以更轻松地处理嵌套的对象或数组。例如，我们可以使用嵌套解构和可选链来访问嵌套对象的属性：
const { address: { city, zipcode } = {} } = person;
console.log(city); // 'Beijing'
console.log(zipcode); // undefined在这个例子中，我们使用嵌套解构将 person.address.city 解构到 city 变量中。由于 address 对象可能不存在，我们使用 = {} 语法来设置默认值。然后，我们使用可选链来访问 person.address.zipcode 属性，并将结果解构到 zipcode 变量中。
总结
ES2021 中的嵌套解构和可选链可以帮助我们更轻松地处理对象和数组中的嵌套属性。通过结合使用这两种语言特性，我们可以避免访问不存在的属性时出现错误，并且可以编写更简洁的代码。在编写前端应用时，这些特性非常有用，希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/668a362fdc1ed1a61bd7e185
