JavaScript 的可选链操作符「?.」是一个新的语言特性，它能够方便地处理对象的嵌套属性和方法的调用，避免了一些繁琐的判断和错误处理。本文将介绍可选链操作符的基本语法和使用场景，以及在实际开发中的应用和注意事项，帮助读者更好地理解和掌握这个语言特性。
可选链操作符的基本语法
可选链操作符的基本语法如下：
object?.property object?.method() object?.[expression]
其中，「?」表示如果对象存在，才执行后面的属性或方法调用，否则返回「undefined」。这样就可以避免因为对象不存在而导致的异常和错误。另外，「?.」可以与其他操作符配合使用，如：
object?.property?.method()?.[expression]
这些语法可以将多个嵌套的属性和方法调用简写成一个表达式，提高代码的可读性和简洁性。
可选链操作符的使用场景
可选链操作符通常用于访问对象的属性和方法，特别是在对象嵌套较深的情况下，避免了因为中间对象不存在而导致的异常和错误。例如：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
--------- ------------
----- -----------
------- -------- ---------
-
-
----- ------ - ------------ - ------------------- - ---------
------------------- -- -------- ---------
----- ------- - --------------------
-------------------- -- -------- ---------在这个例子中，「user.address」可能为「null」或「undefined」，因此需要进行判断才能访问「street」属性。传统的写法需要使用「if」语句或三元运算符，而使用可选链操作符则能够更简洁地实现该逻辑。
另一个常见的使用场景是访问对象的方法，例如：
const input = document.querySelector('#input')
if(input){
input.focus()
}
document.querySelector('#input')?.focus()在这个例子中，「querySelector」方法返回一个可能为「null」的对象，如果该对象存在，才能调用「focus」方法。通过使用可选链操作符，可以将这个逻辑简化，使代码更加清晰。
可选链操作符的应用和注意事项
可选链操作符能够简化许多繁琐的判断和错误处理，提高代码的可读性和简洁性。在实际开发中，我们可以在需要访问对象的嵌套属性和方法时，优先考虑使用可选链操作符，以避免无谓的异常和错误。
但是，使用可选链操作符也有一些注意事项。首先，可选链操作符只能用于访问对象的属性和方法，不能用于访问变量和函数。其次，可选链操作符的作用域不包括函数中的「this」，因此在函数内部需要将「this」保存在变量中，再使用可选链操作符。最后，可选链操作符会导致一些问题，例如无法判断对象的类型和属性访问的返回值等，在使用时需要注意。
下面是一些示例代码，展示可选链操作符的应用和注意事项：
-- -------------------- ---- -------
-- ---------
----- ---- - -
----- ------
-------- -
--------- ------------
----- -----------
------- ---------
-
-
----- ------ - --------------------
------------------- -- ---------
-- ---------
----- ----- - --------------------------------
--------------
-- -----------
-------- ------
----- -- - ----
----- ---- - --------------
-----------------
-
--------------- ------ -------- -- -----
-- -----------
----- --- - --
----- - - ---------------------
------------------ -- -- -----------
------------------ -- -------- ---------- ------ ---- -------- ------ -- ---------总结
JavaScript 的可选链操作符「?.」能够方便地处理对象的嵌套属性和方法的调用，避免了一些繁琐的判断和错误处理。本文介绍了可选链操作符的基本语法和使用场景，以及在实际开发中的应用和注意事项。希望读者能够通过本文更好地理解和掌握这个语言特性，从而提高写代码的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4acedb5eee0b525c7e723