对象解构是 JavaScript 中一个十分常用的语法，也是 ES6 的一大亮点。传统的对象解构语法让我们可以轻松地从一个对象中提取出多个属性，但对于一些高级应用场景，传统的对象解构语法可能会有所欠缺。为了解决这个问题，ECMAScript 2021 带来了一些新的对象解构语法，本文就来详细介绍一下。
默认值
从一个对象解构出属性时，有时候需要给一些属性指定默认值。传统的对象解构语法虽然可以解构出多个属性，但如果有某个属性不存在，那么这个属性的值就是 undefined，需要进行判断和处理。而在 ECMAScript 2021 中，我们可以使用默认值语法来指定一个属性的默认值，如果这个属性不存在，那么它就会取默认值。示例如下：
const person = { name: "Tom", age: 18 };
const { name, gender = "Unknown" } = person;
console.log(name); // "Tom"
console.log(gender); // "Unknown"如果 person 对象中没有 gender 属性，那么 gender 就会取默认值 "Unknown"。
指定别名
传统的对象解构语法可以让我们轻松地从一个对象中提取出多个属性并且将它们命名为对应的变量名，这样做可以大大提高代码的可读性。但对于一些特殊情况，我们可能需要将某个属性命名为另一个变量名。在 ECMAScript 2021 中，我们可以使用别名语法来指定一个属性的别名，这样就可以将一个属性名映射为一个不同的变量名。示例如下：
const person = { name: "Tom", age: 18 };
const { name: fullName, age: yearsOld } = person;
console.log(fullName); // "Tom"
console.log(yearsOld); // 18在这个示例中，我们将 person 对象中的 name 属性命名为 fullName，将 age 属性命名为 yearsOld，这两个别名就可以在后续的代码中直接使用。
嵌套解构
传统的对象解构语法可以处理简单的对象结构，但对于一些嵌套的对象结构，则需要进行多次解构操作，这会让代码变得复杂且难以理解。在 ECMAScript 2021 中，我们可以使用嵌套解构语法来解决这个问题，这样就可以轻松地从嵌套的对象中提取出所需的属性。示例如下：
const person = { name: "Tom", age: 18, contact: { email: "tom@example.com", phone: "1234567890" } };
const { name, contact: { email } } = person;
console.log(name); // "Tom"
console.log(email); // "tom@example.com"在这个示例中，我们首先对 person 对象进行解构，然后使用嵌套解构语法将 contact 对象解构出来，并提取出它的 email 属性。
指定可选属性
在一些情况下，我们需要从一个对象中提取出的属性是可选的，即这个属性可能不存在，不过如果存在的话，我们需要对其进行处理。在 ECMAScript 2021 中，我们可以使用可选链语法和对象解构语法结合来实现这个功能。示例如下：
const person = { name: "Tom", age: 18 };
const { email } = person?.contact ?? {};
console.log(email); // undefined在这个示例中，我们首先使用可选链语法判断 person 对象中是否存在 contact 属性，如果存在，则将其解构出来，并提取出 email 属性。如果不存在 contact 属性，则返回一个空对象 {}，用于避免解构出错。值得注意的是，这个语法需要在浏览器或 Node.js 环境中使用最新版本的 JavaScript 解释器才能正常运行。
总结
ECMAScript 2021 中的对象解构新特性为我们提供了更加方便、灵活的解构语法，可以让我们处理更加复杂的对象结构，并且可以提高代码的可读性和灵活性。在实际的开发过程中，我们可以根据业务需求来决定使用哪种解构语法，以达到更加优雅和高效的代码实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64701c06968c7c53b0e402f5