TypeScript 中的可选链操作符

阅读时长 5 分钟读完

可选链操作符是 TypeScript 3.7 中新增的语法特性,它可以减少代码中的冗余和异常。在处理对象访问时,默认情况下,如果访问的对象为 null 或 undefined,则会抛出异常。但是,可选链操作符可以让我们使用更少的代码处理这些异常情况。

可选链操作符语法

可选链操作符是一个问号(?)后跟着一个点号(.)(即 ?.),用于判断当前属性或方法是否存在。如果存在,则执行访问;如果不存在,则返回 undefined。

可选链操作符使用场景

1. 判断对象的属性或方法是否存在

在访问对象的属性或方法时,我们经常要判断对象的存在性,这样可以避免出现异常和错误。使用可选链操作符就可以大大减少冗余代码。

-- -------------------- ---- -------
--------- ------ -
    ------ -------
    ----- -------
-

----- ------- ------ - - ----- ------ -

-- -----
-- ------- -- ------------ -
    -------------------------
-

-- ---------
--------------------------

2. 处理嵌套对象

当我们需要访问嵌套对象中的属性时,普通写法通常需要多次判断嵌套对象的存在性。使用可选链操作符,我们可以非常简洁地处理嵌套对象。

-- -------------------- ---- -------
--------- ---------- -
    ------ -------
    --------- -
        ------ -------
        ------- -------
    -
-

----- ----------- ---------- - - ----- ---- -

-- -----
-- ----------- -- ------------------ -- ------------------------- -
    --------------------------------------
-

-- ---------
----------------------------------------

3. 处理数组和函数

可选链操作符不仅可以处理对象和嵌套对象,还可以处理数组和函数。

-- -------------------- ---- -------
----- ------- - --- -- ---

-- -----
-- -------- -- -------------- - -- -
    ------------------------
-

-- ---------
--------------------------

-------- --------------- ------- -
    ---------------- --------- -- ------------
-

-- -----
-- ------ -- ------ ----- --- ----------- -
    --------
-

-- ---------
----------

注意事项

使用可选链操作符时需要注意以下几点:

  • 不要滥用可选链操作符,只在必要的地方使用。
  • 可选链操作符只能判断 undefined 和 null,不能判断其他假值(如 0、''、false 和 NaN)。
  • 可选链操作符只能用于对象、数组和函数,不能用于基本类型和枚举。
  • 可选链操作符无法跳过方法的调用,在方法调用上仍然需要完整正确的参数。

结论

使用可选链操作符可以让我们更加简洁和优雅地处理对象访问中的异常情况。在实际开发中,我们需要合理地使用这个语法特性,避免滥用和误用,从而使代码更加健壮和可维护。

示例代码

以下是一个使用可选链操作符的示例代码:

-- -------------------- ---- -------
--------- ------ -
    ------ -------
    ----- -------
    --------- -
        ------- -------
        ------- -------
    -
-

-------- ------------------------ ------- -
    ------------------ -------------- -- -------------
    ----------------- ------------- -- -------------
    ------------------- ------------------------ -- -------------
    ------------------- ------------------------ -- -------------
-

----- -------- ------ - - ----- ------- ---- --- -------- - ------ ------------------ - --
----- -------- ------ - - ---- --- -------- - ------ ------------ - --
----- -------- ------ - ---

-------------------------
-------------------------
-------------------------
------------------

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67502868fbd23cf89073dc1e

纠错
反馈