在 JavaScript 编程领域，ES2020 可选链操作符是一个比较新的技术，它提供了一种简单、优雅的方法来处理变量链的访问，从而避免了在编码时出现 undefined 或者 null 引用的情况。在本文中，我们将详细、深入地探讨 ES2020 可选链操作符，指导您如何学习和应用该技术来提高代码的健壮性和可读性。
什么是可选链操作符
可选链操作符（Optional Chaining Operator）是一种简化了变量链式调用的操作符，它可以安全地访问对象、数组和函数，如果访问的属性或方法不存在，则会返回 undefined。可选链操作符在语法上是问号后接个点号的符号 ?. （即 ?. 操作符）。
理解可选链操作符之前，我们先来看一个 JavaScript 代码的例子：
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- -------- - --------- ----------- ----- ---------- - -- ------------------------ -- ------------------- -- ------------- ------------------------ -- -------------------- -- --------------------------- -- ------------展开代码
在上面的代码中，我们需要检查对象的属性是否存在，才能安全地访问它们的子属性。这使得代码变得冗长、复杂，尤其是当属性链很长时。使用可选链操作符就可以轻松地解决这个问题。
使用可选链操作符，上面的代码就可以简化成：
console.log(user.address?.city); // 输出：'Shanghai' console.log(user.address?.country?.name); // 输出：undefined
可选链操作符的应用不仅仅局限于对象，还可以用于访问函数和数组。
如何使用可选链操作符
下面我们来看几种使用可选链操作符的情况：
1. 对象
可选链操作符可以用来访问对象属性。如果对象的属性不存在，则返回 undefined。
const user = { name: 'Tom', age: 18 }; console.log(user?.name); // 输出 'Tom' console.log(user?.address?.city); // 输出 undefined
上面的示例中，第一行输出 'Tom'，因为 user 对象有一个 name 属性。第二行输出 undefined，因为 user 对象没有 address 属性，那么我们再加上 address 属性呢？
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- -------- - --------- ----------- ----- ---------- - -- --------------------------------- -- -- ---------- ------------------------------------------ -- -- ---------展开代码
我们仍然可以通过 ?. 操作符安全地访问 address 对象的 city 属性，如果 country 属性不存在，将返回 undefined。
2. 数组
可选链操作符可以用来访问数组索引或者属性中的元素。如果数组或属性不存在或者不存在相应的元素，则返回 undefined。
const fruits = ['apple', 'banana', 'orange']; console.log(fruits?.[0]); // 输出 'apple' console.log(fruits?.[3]); // 输出 undefined
在上面的代码中，第一行输出 'apple'，因为 fruits 数组有一个 0 索引。第二行输出 undefined，因为 fruits 数组没有 3 索引。
我们还可以使用可选链操作符来访问数组中的对象属性：
const players = [{ name: 'Tom' }, { name: 'Jerry' }]; console.log(players?.[0]?.name); // 输出 'Tom' console.log(players?.[2]?.name); // 输出 undefined
在上面的代码中，如果访问的对象不存在或没有相应的属性，则会返回 undefined。
3. 函数
可选链操作符还可以用来调用函数。如果函数不存在，则返回 undefined。
const user = { name: 'Tom', sayHello() { return `Hello, I'm ${this.name}.` } }; console.log(user?.sayHello?.()); // 输出 'Hello, I'm Tom.' console.log(user?.sayGoodbye?.()); // 输出 undefined
在上面的代码中，我们使用可选链操作符来安全地调用 user 对象中的 sayHello 函数。如果我们调用的函数存在，则返回函数的执行结果；如果函数不存在，则返回 undefined。
可选链操作符和空值合并运算符的差异
空值合并运算符（Nullish Coalescing Operator）是另一个比较新的 JavaScript 技术，它可以用来判断变量是否为 null 或者 undefined，如果是，则使用默认值。空值合并运算符在语法上是两个问号的符号 ??。需要注意的是，空值合并运算符只会在变量不是 null 或者 undefined 时返回变量本身。
const name = undefined; console.log(name ?? 'Unknown'); // 输出 'Unknown' const age = 0; console.log(age ?? 18); // 输出 0
可选链操作符与空值合并运算符的主要区别在于，可选链操作符只会判断变量是否为 null 或者 undefined，如果是，则返回 undefined。而空值合并运算符则会在变量为 falsy 值时，使用默认值。
const user = { name: '', age: 0 }; console.log(user?.name ?? 'Unknown'); // 输出 '' console.log(user?.age ?? 18); // 输出 0
上面的示例中，由于 user 对象的 name 属性为空字符串，所以使用可选链操作符访问 name 属性并不会返回默认值 'Unknown'，相反使用空值合并运算符则会返回 'Unknown'。
总结
本文详细、深入地介绍了 ES2020 可选链操作符的使用方法和原理，以及它与空值合并运算符的区别。在编写 JavaScript 代码时，使用可选链操作符可以使代码更加清晰、简洁，提高代码的可读性和可维护性。希望本文可以对您掌握该技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d32baab5eee0b525ab06d5
