ECMAScript 2020 是 JavaScript 的最新版本，其中新增了 Optional Chaining 运算符，该运算符可以方便地处理存在空值或未定义的属性操作，避免了代码中出现一连串的判空操作。本文将介绍 Optional Chaining 运算符的作用，以及在实际开发中如何使用它提高代码质量与开发效率。
Optional Chaining 运算符
Optional Chaining 运算符用 ?. 表示，用于避免在访问对象深层属性时，遇到空值或未定义的属性而导致代码错误。它的使用十分简单，如下所示：
const person = { name: 'Alice', address: { city: 'London' } };
console.log(person?.name); // 输出 'Alice'
console.log(person?.age); // 输出 undefined
console.log(person?.address?.city); // 输出 'London'
console.log(person?.address?.country); // 输出 undefined在上面的代码中，我们尝试获取 person 对象的 name、age、address.city 和 address.country 属性。对于 name 和 address.city 属性，由于它们都存在且有值，所以可以直接访问；而对于 age 和 address.country 属性，由于它们不存在或未定义，所以会返回 undefined。
在实际开发中的应用
在实际开发中，Optional Chaining 运算符可以使用在许多场景中，具体如下：
1. 避免深层嵌套属性操作时的错误
在处理对象的嵌套属性时，常常需要进行多重判空操作，否则很容易出现未定义的变量导致代码崩溃的情况，如下代码所示：
const person = { name: 'Alice', address: { city: 'London' } };
if (person && person.address && person.address.city) {
console.log(`I live in ${person.address.city}`);
}使用 Optional Chaining 运算符可以避免不必要的判空操作，使代码更加简洁，如下代码所示：
const person = { name: 'Alice', address: { city: 'London' } };
console.log(`I live in ${person?.address?.city}`);2. 处理可选属性的操作
在处理可能存在但不一定存在的属性时，使用 Optional Chaining 运算符可以很方便地处理这些情况，避免代码冗长且易错。例如，我们可以处理一个对象，这个对象可能存在 occupation 属性，也可能不存在这个属性，如下代码所示：
const person1 = { name: 'Alice', age: 20 };
const person2 = { name: 'Bob', age: 25, occupation: 'Developer' };
console.log(`Person1's occupation is ${person1?.occupation}`);
console.log(`Person2's occupation is ${person2?.occupation}`);3. 快速处理 Promise 链的数据
在 Promise 链中，可能存在一些 Promise 的状态并不是已解决或已拒绝的情况，而是处于 pending 状态。使用 Optional Chaining 运算符，我们可以处理这些情况并从 Promise 链中获取数据，如下代码所示：
-- -------------------- ---- -------
----- --------- - ----- -- -- -
----- ----------- - ----- --------------------------------------
-- ----------------- -
------ -------------------
-
-
------ -- -- -
----- ---- - ----- ------------
------------------ --------------------------
-----在上面的代码中，我们使用到了 Optional Chaining 运算符，可以在 Promise 链还未解决时即使地获取数据，提高了程序的健壮性。
总结
Optional Chaining 运算符是 ECMAScript 2020 中新增的一个重要特性，能够提高代码质量和开发效率。在实际开发中，Optional Chaining 运算符主要适用于处理深层嵌套属性和可选属性的情况，以及快速处理 Promise 链中的数据。我们可以使用它编写简洁、清晰、稳定的代码，从而提高了我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa310a48841e989465beb9
