ES9 可选链操作符是 JavaScript 语言的一个新特性，它可以让我们更加优雅地处理对象属性的访问和方法的调用，同时也能够有效地避免代码中因为对象属性不存在而导致的错误。在本文中，我们将深入探讨可选链操作符的使用方法和注意事项，并提供一些示例代码和错误排查的技巧，帮助读者更好地理解和掌握这个新特性。
可选链操作符的基本用法
可选链操作符的语法很简单，就是一个问号（?）加上一个点号（.），例如：
const name = person?.name;
上面的代码中，person?.name 表示如果 person 存在，则返回 person.name 的值，否则返回 undefined。这个语法非常方便，可以让我们在访问对象属性时不必担心对象不存在的情况，从而避免了很多不必要的错误。
另外，可选链操作符还可以用于方法调用。例如：
const result = person?.getName?.();
上面的代码中，person?.getName?.() 表示如果 person 存在且具有 getName 方法，则调用该方法并返回结果，否则返回 undefined。这个语法也非常方便，可以让我们在调用对象方法时不必担心对象不存在或方法不存在的情况，从而更加优雅地处理代码逻辑。
可选链操作符的进阶用法
除了上面介绍的基本用法之外，可选链操作符还有一些比较高级的用法，例如：
1. 使用可选链操作符访问数组元素
可选链操作符不仅可以用于对象属性的访问，还可以用于数组元素的访问。例如：
const value = arr?.[index];
上面的代码中，arr?.[index] 表示如果 arr 存在且具有 index 位置的元素，则返回该元素的值，否则返回 undefined。这个语法非常方便，可以让我们在访问数组元素时不必担心数组不存在或元素不存在的情况，从而更加优雅地处理代码逻辑。
2. 使用可选链操作符调用构造函数
可选链操作符还可以用于调用构造函数。例如：
const obj = new MyClass?.();
上面的代码中，MyClass?.() 表示如果 MyClass 存在，则调用它的构造函数并返回一个新的对象，否则返回 undefined。这个语法也非常方便，可以让我们在调用构造函数时不必担心构造函数不存在的情况，从而更加优雅地处理代码逻辑。
可选链操作符的错误排查
虽然可选链操作符可以让我们更加优雅地处理代码逻辑，但是如果使用不当，仍然可能会出现错误。下面是一些常见的错误和如何排查它们的技巧：
1. 对象不存在的错误
如果使用可选链操作符访问一个不存在的对象，会返回 undefined，这本身并没有什么问题。但是如果在 undefined 上调用属性或方法，则会出现错误。例如：
const name = person?.name?.toUpperCase();
上面的代码中，如果 person 不存在，则 person?.name 返回 undefined，再调用 toUpperCase 方法就会出现错误。为了避免这种情况，可以使用 nullish 合并操作符（??）来为变量设置默认值，例如：
const name = person?.name ?? ''; const upperName = name.toUpperCase();
上面的代码中，如果 person 不存在，则 name 的值为 ''，再调用 toUpperCase 方法也不会出现错误。
2. 方法不存在的错误
如果使用可选链操作符调用一个不存在的方法，会返回 undefined，这本身并没有什么问题。但是如果在 undefined 上继续调用方法，则会出现错误。例如：
const result = person?.getName?.()?.toUpperCase();
上面的代码中，如果 person 不存在或没有 getName 方法，则 person?.getName?.() 返回 undefined，再调用 toUpperCase 方法就会出现错误。为了避免这种情况，可以使用函数式编程的技巧，例如：
const result = person?.getName?.() || ''; const upperResult = result.toUpperCase();
上面的代码中，如果 person 不存在或没有 getName 方法，则 result 的值为 ''，再调用 toUpperCase 方法也不会出现错误。
总结
ES9 可选链操作符是 JavaScript 语言的一个新特性，它可以让我们更加优雅地处理对象属性的访问和方法的调用，同时也能够有效地避免代码中因为对象属性不存在而导致的错误。在使用可选链操作符时，需要注意对象不存在和方法不存在的情况，以及如何使用 nullish 合并操作符和函数式编程的技巧进行错误排查。希望本文能够帮助读者更好地理解和掌握这个新特性，从而写出更加优雅和健壮的前端代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655da19ed2f5e1655d7e57ea