在 ECMAScript 2019 中，Optional Chaining（可选链）操作符是新引入的一个特性。它可以使得在访问对象属性或方法时更加优雅和简洁，并且有效的避免了 TypeError 错误的产生。在本文中，我们将深入探讨 Optional Chaining 操作符的使用技巧。
快速了解 Optional Chaining 操作符
在 JavaScript 中，当我们想要访问某个对象的属性或方法时，通常通过 dot notation（点符号）或者 bracket notation（方括号语法）来访问，例如：
-- -------------------- ---- -------
--- ------ - -
----- -----
---- ---
-------- -
----- -----
-------- -----
--
--
--- ---- - ------------ -- ----
--- ---- - -------------------- -- ----
--- ----- - ------------- -- ---------在访问属性或方法时，如果对象的属性或方法不存在，那么通常会返回 undefined， 导致程序出现 TypeError 错误，如：
var phone = person.phone; // TypeError: Cannot read property 'phone' of undefined
Optional Chaining 操作符就是为了解决这个问题而引入的。它可以在访问链式对象属性或方法时，检查属性或方法是否存在并安全地返回结果，如：
var phone = person?.phone;
如果 person 对象中不存在 phone 属性，则返回 undefined，而不会出现 TypeError 错误。
Optional Chaining 操作符的使用技巧
使用 Optional Chaining 操作符访问对象属性
Optional Chaining 操作符可以用于访问深嵌套的对象属性，例如：
var address = person?.address?.city;
如果 address 属性不存在，那么 address 变量会被赋值为 undefined。
使用 Optional Chaining 操作符调用对象方法
除了访问对象属性外，Optional Chaining 操作符还可以用于调用对象的方法，例如：
var greet = person?.sayHello?.();
如果 person 对象中不存在 sayHello 方法，greet 变量会被赋值为 undefined。
使用 Optional Chaining 操作符遍历数组
在遍历数组时，如果有些对象不存在，那么通常会出现 TypeError 错误。使用 Optional Chaining 操作符可以避免这种情况的发生。
例如，假设我们有以下数组：
var users = [
{ name: "小明", age: 18, address: { city: "北京" } },
{ name: "小红", age: 19 },
{ name: "小刚", age: 20, address: { city: "上海" } },
];我们希望遍历这个数组，并获取每个用户的城市属性。如果使用传统的访问方式，那么代码可能会写成这样：
for (var i = 0; i < users.length; i++) {
var user = users[i];
var city = user.address.city; // TypeError: Cannot read property 'city' of undefined
}这里会出现 TypeError 错误，因为其中一个用户没有地址属性。使用 Optional Chaining 操作符可以避免这种情况，如：
for (var i = 0; i < users.length; i++) {
var user = users[i];
var city = user?.address?.city; // 如果 address 对象不存在，则 city 变量会被赋值为 undefined
}使用 Optional Chaining 操作符和 Nullish Coalescing 操作符联合使用
Optional Chaining 操作符和 Nullish Coalescing（空值合并）操作符是两个在 ECMAScript 2019 中引入的新特性，它们可以同时使用，以提高代码的灵活性和可读性。
Nullish Coalescing 操作符与 Optional Chaining 操作符一样，可以避免未定义的属性或方法产生 TypeError 错误。例如：
var phone = person?.phone ?? "无电话号码";
这里如果 person 对象中不存在 phone 属性，则使用默认值 "无电话号码"。
使用解构语法和 Optional Chaining 操作符
解构语法是 ECMAScript 6 中引入的一种编码方式，它可以快速地从对象或数组中提取属性或值，并以变量的形式存储在当前作用域中。使用 Optional Chaining 操作符可以避免出现 TypeError 错误。
例如，假设我们有以下对象：
var person = { name: "小明", age: 18, address: { city: "北京", country: "中国" } };
var { name, age, address: { city, country } = {} } = person;这里的解构语法可以快速地将 person 对象中的属性解构到当前作用域中的变量中。
如果 person 对象中的 address 属性不存在，那么该语句会出现错误。使用 Optional Chaining 操作符可以避免这种情况的发生，如：
var { name, age, address: { city, country } = {} } = person ?? {};这里会将 person 对象解构到当前作用域中的变量中，如果 person 对象为 null 或者 undefined，则使用一个默认的空对象。
示例代码
下面是一些使用 Optional Chaining 操作符的示例代码：
-- -------------------- ---- ------- -- ------ --- ------ - - ----- ----- ---- -- -- --- ---- - ------------- -- ---- --- ----- - -------------- -- --------- -- ------ --- ------ - - ----- ----- ---- --- --------- ---------- - ------ ----- - -- --- ----- - --------------------- -- ----- --- --- - ----------------------- -- --------- -- ---- --- ----- - - - ----- ----- ---- --- -------- - ----- ---- - -- - ----- ----- ---- -- -- - ----- ----- ---- --- -------- - ----- ---- - -- -- --- ---- - - -- - - ------------- ---- - --- ---- - --------- --- ---- - -------------------- -- -- ------- ------- ---- ------- --------- - -- ------ --- ------ - - ----- ----- ---- --- -------- - ----- ----- -------- ---- - -- --- - ----- ---- -------- - ----- ------- - - -- - - ------ -- ---
总结
Optional Chaining 操作符是 ECMAScript 2019 中引入的一个新特性，它可以帮助开发者更加优雅和简洁地访问对象属性或方法，避免出现 TypeError 错误。本文详细介绍了 Optional Chaining 操作符的使用技巧，并提供了示例代码，希望本文可以为读者带来指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd264695b1f8cacdcbfdbc