在前端开发中，解构赋值是一种常用的操作，可以将数组和对象中的某些属性值赋值给变量，使得代码更加简洁易读。而在 ECMAScript 2020 规范中，解构赋值对象属性的方式得到了升级，使得这种操作更加方便和灵活。
解构赋值对象属性的基础语法
在 ECMAScript 2015 规范中，我们已经学习了解构赋值对象属性的基本语法，例如：
const person = { name: 'John', age: 30, gender: 'male' };
const { name, age } = person;
console.log(name, age); // 输出：John 30在上述代码中，我们使用了对象的解构赋值语法，将 person 对象中的 name 和 age 属性的值分别赋值给了 name 和 age 两个变量。这使得我们可以更方便地访问对象中的属性，并且避免了使用冗长的 person.name 和 person.age 的方式。
ECMAScript 2020 中的升级
在 ECMAScript 2020 中，我们可以使用新的语法升级来更加轻松地解构赋值对象属性，尤其是在多层嵌套的对象中。这种语法我们称之为“可选链”语法，主要使用问号 ? 来表示属性是否存在，从而避免了在嵌套对象中遇到未定义的属性时报错。
例如，在下面这个示例中，我们尝试访问一个嵌套对象中的属性：
const person = { name: 'John', age: 30, address: { city: 'New York', state: 'NY' } };
const city = person.address.city;
console.log(city); // 输出：New York上述代码中，我们成功获取了 person 对象中的 address 属性，并且从中获取了 city 属性的值。
但是，如果我们希望简化这个过程，可以使用 ECMAScript 2020 的可选链语法：
const person = { name: 'John', age: 30 };
const city = person.address?.city;
console.log(city); // 输出：undefined在上述代码中，我们使用了问号 ? 来判断 person 对象中是否存在 address 属性。如果没有，则 city 变量被设置为 undefined，而不是抛出错误。
在多层嵌套对象中，可选链语法可以更加方便地获取属性值，例如：
const person = { name: 'John', age: 30, address: { city: 'New York', state: 'NY' } };
const state = person?.address?.state;
console.log(state); // 输出：NY在上述代码中，我们使用了两个可选链语法，分别判断了 person 和 address 对象的存在，从而避免了在不存在属性的情况下出现错误。
总结
ECMAScript 2020 中的可选链语法使得解构赋值对象属性更加灵活和方便，特别是在多层嵌套对象中的处理上更加出色。在开发过程中，我们应该学会使用这种新语法，以提高代码的可读性和稳定性。
以下是可选链语法的完整示例代码：
const person = { name: 'John', age: 30 };
const city = person.address?.city;
console.log(city); // 输出：undefined
const person2 = { name: 'John', age: 30, address: { city: 'New York', state: 'NY' } };
const state = person2?.address?.state;
console.log(state); // 输出：NY来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b609cfadd4f0e0ffebf11b